bug(mobile): document detail toolbar overflows at 320px — back button clipped #100

New Issue

marcel · 2026-03-27T12:21:19+01:00

marcel commented

2026-03-27 12:21:19 +01:00

The document detail action toolbar contains: ← (back) | ⋮ (menu) | Annotate | Edit | ↓ (download). At 320px the back button (←) is clipped by the screen edge and the toolbar overflows horizontally.

The root cause is that "Annotate" and "Edit" are icon+text buttons with a fixed minimum width. Together they are too wide for a 320px toolbar alongside the other controls.

Options

Option A — Collapse "Annotate" and "Edit" to icon-only at <480px

Show only the icon, no label, on narrow screens. Add aria-label to maintain accessibility.

<button aria-label="Annotate">
  <AnnotateIcon />
  <span class="hidden sm:inline">Annotate</span>
</button>

Pros: simple, minimal change, toolbar stays in one row.
Cons: users must learn what the icons mean.

The ⋮ button already exists (good decision). At <480px, move "Annotate" and "Download" into the overflow menu, keeping only ← | ⋮ | Edit visible. Edit is the most important action and deserves to stay visible; Annotate and Download are secondary.
Pros: very clean toolbar; promotes the ⋮ menu as the right place for secondary actions.
Cons: users need to discover that Annotate and Download live in the overflow menu.

Recommendation: Option B

The ⋮ overflow menu already exists — it was a good architectural decision. On mobile (<480px), the toolbar should show: ← Back | ⋮ (which contains: Annotate, Download, and any other actions) | Edit (as a text button or primary icon). This is a common pattern (Google Docs mobile, Notion mobile) and is immediately understood. Add a visual indicator or tooltip to the ⋮ menu on first use if needed.

## Severity: Medium — navigation broken at 320px The document detail action toolbar contains: ← (back) | ⋮ (menu) | Annotate | Edit | ↓ (download). At 320px the back button (`←`) is clipped by the screen edge and the toolbar overflows horizontally. The root cause is that "Annotate" and "Edit" are icon+text buttons with a fixed minimum width. Together they are too wide for a 320px toolbar alongside the other controls. --- ## Options ### Option A — Collapse "Annotate" and "Edit" to icon-only at <480px Show only the icon, no label, on narrow screens. Add `aria-label` to maintain accessibility. ```html <button aria-label="Annotate"> <AnnotateIcon /> <span class="hidden sm:inline">Annotate</span> </button> ``` **Pros:** simple, minimal change, toolbar stays in one row. **Cons:** users must learn what the icons mean. ### Option B — Move secondary actions into the ⋮ overflow menu on narrow screens The ⋮ button already exists (good decision). At <480px, move "Annotate" and "Download" into the overflow menu, keeping only ← | ⋮ | Edit visible. Edit is the most important action and deserves to stay visible; Annotate and Download are secondary. **Pros:** very clean toolbar; promotes the ⋮ menu as the right place for secondary actions. **Cons:** users need to discover that Annotate and Download live in the overflow menu. --- ## Recommendation: Option B The ⋮ overflow menu already exists — it was a good architectural decision. On mobile (<480px), the toolbar should show: ← Back | ⋮ (which contains: Annotate, Download, and any other actions) | Edit (as a text button or primary icon). This is a common pattern (Google Docs mobile, Notion mobile) and is immediately understood. Add a visual indicator or tooltip to the ⋮ menu on first use if needed.

marcel added the ui label 2026-03-27 12:28:18 +01:00

marcel referenced this issue from a commit

2026-03-27 16:42:24 +01:00

fix(#100): hide action button labels on mobile to prevent toolbar overflow

marcel closed this issue

2026-03-27 16:43:56 +01:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: marcel/familienarchiv#100