mirror of
https://github.com/MBombeck/HealthLog.git
synced 2026-11-08 20:42:43 +00:00
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:
1 parent
5b6544ec63
commit
6ee7df3098
1 file changed
+12
-9
@@ -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>
|
||||
|
||||
Reference in new issue
Block a user