fix(nav): keep mobile More-menu labels on one line

Trim the longest label ('Benachrichtigungen') with truncate (nowrap +
ellipsis) instead of break-words so every More-hub tile reads on a
single line on a phone, matching its neighbours. The full label stays
discoverable via the title attribute; the desktop layout is untouched.
This commit is contained in:
Marc-André Bombeck committed 2026-06-20 16:57:01 +02:00
1 parent 5b6544ec63
commit 6ee7df3098
1 file changed
+12 -9
+12 -9
View File
@@ -247,15 +247,18 @@ export function BottomNav() {
)}
>
<item.icon className="h-5 w-5 shrink-0" aria-hidden="true" />
{/* v1.18.0 — the label must stay inside the tile across all
six locales. The longest single-word label (German
"Benachrichtigungen") has no natural break opportunity, so
`min-w-0` alone is not enough — the unbroken word forces the
span past the grid track and overflows the tile. `min-w-0`
lets the flex child shrink below its content width,
`break-words` introduces a break inside the long word, and
the auto-height tile (`min-h-14`) absorbs the second line. */}
<span className="min-w-0 text-sm leading-tight font-medium break-words">
{/* v1.18.10 (W7) — keep every label on ONE line. The longest
single-word label (German "Benachrichtigungen") used to
wrap to two lines via `break-words`, which left the tile
visually unbalanced beside its single-line neighbours.
`min-w-0` lets the flex child shrink below its content
width and `truncate` (nowrap + ellipsis) trims the
overflow instead of breaking the word. `title` keeps the
full label discoverable on hover/long-press. */}
<span
className="min-w-0 truncate text-sm leading-tight font-medium"
title={t(item.tKey)}
>
{t(item.tKey)}
</span>
</Link>