`) — without it, a long
+ // label (e.g. "Development", "Messages", or a mode's
+ // exposureNoun) can force this column past its 1/5 share of
+ // a 320/390px bar, overflowing the row by a few px. Tailwind's
+ // `justify-around` (space-around) falls back to `center` per
+ // the CSS Box Alignment spec whenever the line's free space
+ // is negative, and centering an overflowing row shifts its
+ // start point negative — the exact -2px left overhang on the
+ // first ("Home") tab this fixes. `min-w-0` here (mirroring
+ // the `min-w-0` already on the More button below) lets the
+ // label's own `truncate` class actually engage instead.
+ 'group relative flex min-h-[56px] min-w-0 flex-col items-center justify-center gap-0.5 px-1 py-1.5',
'outline-none transition-colors [transition-duration:var(--fw-dur-fast)] motion-reduce:transition-none',
'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-border-focus',
active ? 'text-accent-700' : 'text-text-tertiary hover:text-text-secondary',
@@ -178,7 +192,7 @@ export const FairwayBottomNav = memo(function FairwayBottomNav({
);
})}
{onMoreOpen && (
-