From 4d0bbed5967d5372892e4d437210acc25af64e6a Mon Sep 17 00:00:00 2001
From: asepharyana <superaseph@gmail.com>
Date: Fri, 28 Aug 2026 01:18:23 +0700
Subject: [PATCH] fix(frontend): mobile nav pills fixed width so labels don't
 squeeze

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).
---
 services/frontend/src/components/shell/mobile-nav.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/services/frontend/src/components/shell/mobile-nav.tsx b/services/frontend/src/components/shell/mobile-nav.tsx
index 2ae4a4b7..d8ca7432 100644
--- a/services/frontend/src/components/shell/mobile-nav.tsx
+++ b/services/frontend/src/components/shell/mobile-nav.tsx
@@ -45,7 +45,7 @@ export function MobileNav() {
               aria-label={item.label}
               aria-current={active ? "page" : undefined}
               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
                   ? "is-active text-signal"
                   : "text-ink-faint hover:text-ink-soft",
@@ -64,7 +64,9 @@ export function MobileNav() {
                 className="relative z-10 size-[20px]"
                 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>
           );
         })}