MythEclipse/GMW
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(frontend): mobile nav pills fixed width so labels don't squeeze

Browse Source 
Use fixed w-[72px] shrink-0 pills (not flex-1) so the 7 bottom-nav items
keep their shape and scroll horizontally instead of compressing labels to
overlap; add truncating 10px mobile label (12px >=sm).
This commit is contained in:
asepharyana
2026-08-28 01:18:23 +07:00
parent ae41f64e46
commit 4d0bbed596
1 changed files with 4 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
services/frontend/src/components/shell/mobile-nav.tsx
+4 -2
View File
@@ -45,7 +45,7 @@ export function MobileNav() {
aria-label={item.label} aria-label={item.label}
aria-current={active ? "page" : undefined} aria-current={active ? "page" : undefined}
className={cn( className={cn(
"game-nav-item relative flex min-h-[44px] min-w-[60px] flex-1 snap-center flex-col items-center justify-center rounded-t-[20px] px-2 pt-2 pb-[calc(0.4rem+env(safe-area-inset-bottom))] sm:flex-none", "game-nav-item relative flex min-h-[44px] w-[72px] shrink-0 snap-center flex-col items-center justify-center rounded-t-[20px] px-1 pt-2 pb-[calc(0.4rem+env(safe-area-inset-bottom))] sm:flex-none",
active active
? "is-active text-signal" ? "is-active text-signal"
: "text-ink-faint hover:text-ink-soft", : "text-ink-faint hover:text-ink-soft",
@@ -64,7 +64,9 @@ export function MobileNav() {
className="relative z-10 size-[20px]" className="relative z-10 size-[20px]"
strokeWidth={active ? 2.4 : 2} strokeWidth={active ? 2.4 : 2}
/> />
{item.label} <span className="relative z-10 mt-0.5 max-w-full truncate text-[10px] leading-tight sm:text-xs">
{item.label}
</span>
</Link> </Link>
); );
})} })}