diff --git a/src/components/layout/bottom-nav.tsx b/src/components/layout/bottom-nav.tsx index f7cbc7f19..300fa1cba 100644 --- a/src/components/layout/bottom-nav.tsx +++ b/src/components/layout/bottom-nav.tsx @@ -220,14 +220,19 @@ export function BottomNav() { // The sheet auto-sizes to its content; padding-bottom respects // the iOS safe area so the inner buttons stay reachable above // the home-indicator on iPhone-X-class devices. - className="rounded-t-xl pb-[calc(env(safe-area-inset-bottom)+1rem)] md:hidden" + className="mx-auto max-w-md rounded-t-xl pb-[calc(env(safe-area-inset-bottom)+1rem)] md:hidden" data-testid="bottom-nav-more-sheet" > {t("nav.moreSheetTitle")} {t("nav.moreSheetDescription")} -
+ {/* v1.22.1 — tighten the grid gutters (`px-3`) so each tile claims a + little more width on a 320 px phone; the long single-word labels + (de "Benachrichtigungen") then have room to break onto a clean + second line instead of clipping the last character at the tile + edge. */} +
{moreHub.map((item) => { const isActive = isActiveLink(item.href); return ( @@ -239,8 +244,11 @@ export function BottomNav() { // v1.12 — `min-h-14` matches the capture-picker tiles so // the equivalent tappable rows share one height at this // tier (and the larger row is a more comfortable target). + // v1.22.1 — trim the inner padding/gap (`px-3`, `gap-2.5`) + // to hand the label more horizontal room without changing + // the shared tile height. className={cn( - "border-border flex min-h-14 items-center gap-3 rounded-lg border px-4 py-3 transition-colors", + "border-border flex min-h-14 items-center gap-2.5 rounded-lg border px-3 py-3 transition-colors", isActive ? "text-primary bg-primary/5" : "text-foreground hover:bg-accent/40", @@ -252,11 +260,13 @@ export function BottomNav() { ("Benachrichtigungen" → "Benachrichtigun…"); the goal is a readable label, not a balanced tile. Shrink the type to `text-xs` so long single-word locales (de/es/fr/it) fit on - one line at ~110px, and allow a 2-line `line-clamp-2` + one line where they can, and allow a 2-line `line-clamp-2` fallback (with `[overflow-wrap:anywhere]` so a long word breaks rather than overflowing) for the rare label that still cannot fit one line. `min-w-0` lets the flex child - shrink below its content width. */} + shrink below its content width. v1.22.1 — with the wider + text area above, "Benachrichtigungen" wraps fully inside + two lines down to a 320 px viewport. */}