bug(mobile): "SAVE & MARK AS REVIEWED" and "MARK FOR REVIEW" buttons wrap to 3 lines at narrow widths #95

New Issue

marcel · 2026-03-27T12:20:18+01:00

marcel commented

2026-03-27 12:20:18 +01:00

Severity: High — primary CTA is broken on narrow screens

On the New Document page at 320px and the Edit Document page at 375px, the primary CTA button label wraps to 3 lines inside a button that is too short to accommodate it. The button renders at ~36px height (below the 44px minimum touch target) and the wrapped text is barely legible.

Affected buttons:

New document save bar: "SAVE & MARK AS REVIEWED"
Edit document save bar: "MARK FOR REVIEW"

Options

Option A — Shorten the label

"SAVE & MARK AS REVIEWED" → "Save & Review"
"MARK FOR REVIEW" → "Mark as Reviewed"

Shorter labels fit on one line at 320px. Downside: loses some precision in wording.

Option B — Stack the save bar vertically on narrow screens

At <420px, make the save bar a vertical stack where each button gets full width:

@media (max-width: 419px) {
  .save-bar { flex-direction: column; gap: 8px; }
  .save-bar button { width: 100%; min-height: 48px; }
}

Full-width buttons are more touch-friendly and accommodate any label length. Downside: the bar takes more vertical space when stacked.

Option C — Icon + short label on small screens, full label on larger screens

Use a responsive label: show the full text at ≥375px, collapse to a short form at <375px using a <span class="hidden sm:inline">& Mark as Reviewed</span> pattern.

Recommendation: Option B (vertical stack at <420px) + Option A (shorter labels)

Combine both: shorten "SAVE & MARK AS REVIEWED" to "Save & Review" (clear enough) AND stack the bar vertically at <420px. This handles both the label overflow and the touch target size issue in one shot. The stacked layout with full-width buttons is also significantly more accessible for senior users with motor impairments.

## Severity: High — primary CTA is broken on narrow screens On the New Document page at 320px and the Edit Document page at 375px, the primary CTA button label wraps to 3 lines inside a button that is too short to accommodate it. The button renders at ~36px height (below the 44px minimum touch target) and the wrapped text is barely legible. Affected buttons: - **New document save bar:** "SAVE & MARK AS REVIEWED" - **Edit document save bar:** "MARK FOR REVIEW" --- ## Options ### Option A — Shorten the label - "SAVE & MARK AS REVIEWED" → "Save & Review" - "MARK FOR REVIEW" → "Mark as Reviewed" Shorter labels fit on one line at 320px. **Downside:** loses some precision in wording. ### Option B — Stack the save bar vertically on narrow screens At `<420px`, make the save bar a vertical stack where each button gets full width: ```css @media (max-width: 419px) { .save-bar { flex-direction: column; gap: 8px; } .save-bar button { width: 100%; min-height: 48px; } } ``` Full-width buttons are more touch-friendly and accommodate any label length. **Downside:** the bar takes more vertical space when stacked. ### Option C — Icon + short label on small screens, full label on larger screens Use a responsive label: show the full text at ≥375px, collapse to a short form at <375px using a `<span class="hidden sm:inline">& Mark as Reviewed</span>` pattern. --- ## Recommendation: Option B (vertical stack at <420px) + Option A (shorter labels) Combine both: shorten "SAVE & MARK AS REVIEWED" to "Save & Review" (clear enough) AND stack the bar vertically at <420px. This handles both the label overflow and the touch target size issue in one shot. The stacked layout with full-width buttons is also significantly more accessible for senior users with motor impairments.

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

marcel referenced this issue from a commit

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

fix(#95): stack save bar buttons full-width on mobile to prevent text wrap

marcel referenced this issue

2026-04-24 13:22:03 +02:00

feat(mobile): reader surfaces (Home · /documents · /briefwechsel · /persons) pass mobile-first bar at 375 px #318

marcel added this to the (deleted) milestone 2026-04-24 13:35:17 +02:00

Sign in to join this conversation.