bug(mobile): document detail tab bar overflows at ≤375px — "History" tab hidden #99
Reference in New Issue
Block a user
Delete Branch "%!s()"
Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?
Severity: Medium — navigation partially hidden on mobile
The document detail page has four tabs at the bottom of the screen: Metadata | Transcription | Discussion | History. At 375px the "History" tab is cut off and requires horizontal scrolling to reach. At 320px the overflow is even more severe. A horizontal scrollbar appears at the bottom — a hidden affordance that most users will never discover.
Options
Option A — Abbreviate tab labels
Shorten labels to fit: "Info" | "Text" | "Chat" | "Log". All four fit at 320px.
Downside: "Chat" and "Log" lose clarity; users may not understand what they mean.
Option B — Scrollable tab bar with scroll-snap and fade indicator
Keep the full labels but allow horizontal scroll with a subtle right-fade gradient indicating more content. This is a recognised pattern (Chrome, Gmail).
Downside: still requires users to discover the scroll; the fade adds implementation complexity.
Option C — Merge Metadata and Transcription into a single "Info" tab
A family archive user typically wants to see metadata and transcription together as context for a document — they are rarely needed independently. Merging them reduces the tab count from 4 to 3: Info | Discussion | History. Three tabs fit comfortably at 320px.
Downside: the two panels need to be scrollable within the Info tab, which changes the layout. The "Transcription" label as a direct nav target disappears.
Option D — Icons only on mobile
Replace text labels with icons at <480px (calendar for Metadata, text for Transcription, speech bubble for Discussion, clock for History). Icons fit easily in 4 equal slots.
Downside: icon-only tabs require users to learn the mapping; not accessible without tooltip/aria-label.
Recommendation: Option C (merge Info tab) with Option D fallback for icons
Merging Metadata and Transcription into a single "Info" tab is the right long-term UX decision — users viewing a document want metadata and full text together, not split across taps. The result (3 tabs) fits at 320px without any overflow. If the merge is out of scope for now, implement Option B (scrollable with fade indicator) as a short-term fix, since it requires no structural change.