All Docs
FeaturesDepositClearUpdated March 11, 2026

Fix: 'Jump to Room' FAB No Longer Overlaps the Mobile Tab Bar

Fix: 'Jump to Room' FAB No Longer Overlaps the Mobile Tab Bar

Version: 0.1.165
Area: Check-out report builder · Mobile responsive layout

Background

The check-out report builder includes a 'Jump to Room' floating action button (FAB) that lets users quickly navigate between rooms while filling in a report. On mobile devices, this button is rendered as a fixed overlay so it remains accessible regardless of scroll position.

The Problem

On mobile viewports the FAB was visually colliding with the bottom tab bar:

ElementPositionHeight
Mobile bottom tab barfixed bottom-064 px (h-16)
Jump to Room FABfixed bottom-6 right-4~44 px

With a 24 px (bottom-6) offset, the FAB's top edge sat roughly 68 px from the bottom of the screen — only 4 px above the top of the 64 px tab bar. On devices with a home indicator (safe-area inset), the overlap was even more pronounced.

Beyond the geometric overlap, the FAB's visual weight competed directly with the tab bar's active-state indicators, making it harder for users to identify their current section at a glance.

The dashboard layout's pb-20 md:pb-0 main-content padding was also insufficient to compensate for the combined height of the FAB and the tab bar on small screens.

The Fix

The FAB's bottom offset is increased so it clears the tab bar comfortably on all supported devices.

Option A — Tailwind utility class

// Before
<FAB className="fixed bottom-6 right-4" />

// After
<FAB className="fixed bottom-24 right-4" />

bottom-24 equals 96 px, providing 32 px of clearance above the 64 px tab bar.

Option B — Safe-area-aware inline style

For devices with a home indicator (iPhone X and later), a CSS env() expression ensures the offset adapts to the device's reported safe-area inset — the same approach already used by QuickCreateSheet:

<FAB
  className="fixed right-4"
  style={{ bottom: 'calc(env(safe-area-inset-bottom, 0px) + 5rem)' }}
/>

This resolves the overlap on notched devices without hard-coding an arbitrary pixel value.

What Is Not Affected

  • Desktop layout — unchanged. The md:pb-0 breakpoint continues to suppress the mobile bottom padding on wider screens.
  • FAB functionality — room navigation behaviour, icon, and interaction states are identical.
  • Other fixed elements — no changes to the tab bar itself or any other overlay components.

Future Consideration

Having both a bottom tab bar and a floating action button on the same screen creates layered navigation affordances that can feel redundant. A potential follow-up is to surface a Rooms shortcut directly in the bottom tab bar when the user is on a check-out page, eliminating the need for the FAB overlay and simplifying the mobile navigation hierarchy.