Throughout Week 36, we made numerous mobile-specific UX improvements that, while individually small, compound into significantly better mobile experience. For letting agencies with field staff using smartphones and tablets during viewings, property checks, and client meetings, mobile usability isn't optional—it's how the system gets used day-to-day.
These refinements demonstrate that production-ready software requires sweating the details. A sidebar that doesn't auto-close frustrates users dozens of times daily. Inconsistent button spacing makes forms feel unpolished. Missing branding on login pages undermines professional credibility. Fixing these issues doesn't generate headlines, but it meaningfully improves user satisfaction.
What Your Team Will Notice
Auto-closing sidebar: On mobile devices, the sidebar now closes automatically after navigation. Previously, tapping a menu link loaded the new page but left the sidebar covering content—requiring a second tap to dismiss it. This two-tap pattern accumulated frustration across dozens of daily navigations. The fix uses JavaScript to detect mobile devices and close the sidebar automatically after navigation, matching the expected behaviour of mobile apps.
Consistent form spacing: Modal forms now have consistent bottom spacing (mb-24, approximately 96px) to ensure action buttons remain accessible even when the mobile keyboard appears. Previously, keyboards covered buttons, forcing users to dismiss the keyboard, scroll, then tap—a clunky three-step process for a simple form submission. The fixed spacing keeps buttons visible above keyboards on iPhone, Android, and tablet devices.
Login page branding: The login page gained proper logo positioning and responsive branding that works across mobile device sizes. For multi-tenant deployments, each agency's logo appears correctly on their subdomain's login page, providing professional first impressions even on small screens. Previously, logos overflowed containers or appeared misaligned on certain device widths.
Touch target sizes: Buttons and interactive elements meet minimum touch target sizes (44×44px per Apple HIG, 48×48px per Material Design). This prevents mis-taps when users attempt to click small buttons with fingers rather than precise mouse cursors. Field staff wearing gloves (common during winter property inspections) particularly benefit from larger touch targets.
Under the Bonnet: Mobile Sidebar Auto-Close
The auto-close functionality uses vanilla JavaScript (no dependencies) to detect navigation and close the sidebar:
// app/javascript/mobile_sidebar_autoclose.js
document.addEventListener('DOMContentLoaded', function() {
const sidebarLinks = document.querySelectorAll('#sidebar a');
const sidebarToggle = document.querySelector('[data-sidebar-toggle]');
const sidebar = document.querySelector('#sidebar');
// Detect if device is mobile (max-width: 1024px matches Tailwind's lg breakpoint)
const isMobile = () => window.innerWidth < 1024;
sidebarLinks.forEach(link => {
link.addEventListener('click', function(e) {
// Only auto-close on mobile devices
if (!isMobile()) return;
// If sidebar is open, close it after a brief delay to allow navigation
if (sidebar && sidebar.classList.contains('translate-x-0')) {
setTimeout(() => {
if (sidebarToggle) sidebarToggle.click();
}, 150); // 150ms delay matches sidebar transition duration
}
});
});
// Close sidebar when clicking outside (mobile only)
document.addEventListener('click', function(e) {
if (!isMobile()) return;
const clickedInsideSidebar = sidebar && sidebar.contains(e.target);
const clickedToggle = sidebarToggle && sidebarToggle.contains(e.target);
if (!clickedInsideSidebar && !clickedToggle && sidebar && sidebar.classList.contains('translate-x-0')) {
sidebarToggle.click();
}
});
});
This script:
- Attaches click listeners to all sidebar links
- Checks if the device is mobile (viewport width < 1024px)
- If mobile and sidebar is open, triggers the sidebar toggle after 150ms
- Also closes sidebar when tapping outside (common mobile pattern)
The 150ms delay allows Turbo Drive (Rails' page navigation library) to initiate navigation before the sidebar closes, preventing jarring visual transitions. Without the delay, the sidebar would close immediately, then navigation would occur—feeling disconnected.
The isMobile() check ensures desktop users retain sidebar behaviour where it stays open across navigations (desktop users expect persistent sidebars).
Form Bottom Spacing: Tailwind Classes
The consistent spacing uses Tailwind CSS utility classes:
<!-- app/views/shared/_property_edit_modal.html.erb -->
<div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
<div class="bg-white dark:bg-boxdark rounded-lg w-full max-w-2xl max-h-[90vh] overflow-y-auto">
<div class="px-6 py-4">
<h3 class="text-xl font-bold">Edit Property</h3>
</div>
<%= form_with model: property, class: "px-6" do |f| %>
<!-- Form fields here -->
<div class="flex gap-4 justify-end px-6 py-4 mb-24"> <!-- mb-24 = 96px bottom margin -->
<%= f.button "Cancel", type: "button", class: "btn-secondary", data: { action: "click->modal#close" } %>
<%= f.submit "Save Changes", class: "btn-primary" %>
</div>
<% end %>
</div>
</div>
The mb-24 class adds 96px bottom margin, ensuring the button div remains above typical mobile keyboards (which occupy 200-300px of vertical space). Testing across iPhone SE, iPhone 14 Pro Max, and various Android devices confirmed 96px provides reliable clearance.
For larger forms with many fields, we use pb-32 (128px) to account for keyboards that display suggestion bars (iOS QuickType, Android autocomplete).
Responsive Logo Positioning
The login page logo uses responsive Tailwind classes to adapt to screen sizes:
<!-- app/views/devise/sessions/new.html.erb -->
<div class="flex min-h-screen items-center justify-center bg-gray-50 px-4">
<div class="w-full max-w-md">
<!-- Logo -->
<div class="flex justify-center mb-8">
<%= image_tag agency_logo_path(@agency),
alt: @agency.name,
class: "h-12 w-auto sm:h-16 md:h-20 object-contain" %>
</div>
<!-- Login form -->
<div class="bg-white rounded-lg shadow-md p-6 sm:p-8">
<!-- Form fields -->
</div>
</div>
</div>
The responsive classes:
h-12(48px): Base logo height for small mobile devicessm:h-16(64px): Increased height on devices ≥640px widemd:h-20(80px): Further increase on devices ≥768px wideobject-contain: Maintains aspect ratio, prevents distortion
This ensures logos look proportional whether viewed on iPhone SE (375px wide) or iPad Pro (1024px wide). The agency_logo_path(@agency) helper retrieves the correct logo for multi-tenant deployments, maintaining branding consistency per agency.
Testing Mobile-Specific Functionality
System specs with mobile viewport configurations test the experience:
# spec/system/mobile_navigation_spec.rb
RSpec.describe "Mobile Navigation", type: :system do
before do
driven_by :selenium, using: :headless_chrome, options: {
browser_options: { args: ["--window-size=375,667"] } # iPhone SE dimensions
}
end
it "auto-closes sidebar after navigation" do
visit properties_path
# Open sidebar
find('[data-sidebar-toggle]').click
expect(page).to have_css('#sidebar.translate-x-0')
# Click a sidebar link
within('#sidebar') do
click_link "Dashboard"
end
# Wait for navigation
expect(page).to have_current_path(dashboard_path)
# Verify sidebar is closed
sleep 0.2 # Wait for auto-close animation
expect(page).not_to have_css('#sidebar.translate-x-0')
end
end
These tests verify mobile-specific behaviours work correctly across viewport sizes and device configurations.
What About Progressive Web App Features?
While not implemented in Week 36, the mobile refinements lay groundwork for future PWA features:
- Offline support: Service workers caching critical resources
- Home screen installation: "Add to Home Screen" prompt for quick access
- Push notifications: Real-time alerts for viewing appointments or tenant enquiries
- Background sync: Queue actions when offline, sync when connection returns
The responsive design and mobile-first approach means these features can be added incrementally without redesigning the interface.
What's Next
Future mobile enhancements could include:
- Geolocation integration: Auto-fill property addresses based on current location
- Camera integration: Direct photo capture during property viewings
- Biometric authentication: FaceID/TouchID for faster login
- Haptic feedback: Tactile response for button presses and confirmations
But the foundational work—auto-closing sidebar, consistent spacing, responsive branding, and proper touch targets—was completed during Week 36, making the mobile experience feel polished and intentional rather than desktop-shrunk-down.
Related articles: