From fd15338bd04d7a78c9ffde0015850a562daa8c45 Mon Sep 17 00:00:00 2001
From: Harkamal Randhawa <harkamalsr@gmail.com>
Date: Sun, 24 May 2026 04:09:13 -0600
Subject: [PATCH] Hide bottom nav labels on narrow widths and enlarge icons.

Use a container query so cramped nav items show icon-only mode with accessible labels via aria-label.
---
 app/globals.css               | 22 ++++++++++++++++++++++
 components/layout/app-nav.tsx | 15 ++++++++++-----
 2 files changed, 32 insertions(+), 5 deletions(-)

diff --git a/app/globals.css b/app/globals.css
index da5233a..58ca848 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -142,6 +142,28 @@
     @apply border-2 border-border bg-card text-card-foreground;
     box-shadow: var(--retro-shadow);
   }
+
+  .bottom-nav {
+    container-type: inline-size;
+    container-name: bottom-nav;
+  }
+
+  @container bottom-nav (max-width: 32rem) {
+    .bottom-nav-item-label {
+      display: none;
+    }
+
+    .bottom-nav-item {
+      gap: 0;
+      padding-top: 0.625rem;
+      padding-bottom: 0.625rem;
+    }
+
+    .bottom-nav-item-icon {
+      height: 1.75rem;
+      width: 1.75rem;
+    }
+  }
 }
 
 @layer utilities {
diff --git a/components/layout/app-nav.tsx b/components/layout/app-nav.tsx
index a004c13..e651378 100644
--- a/components/layout/app-nav.tsx
+++ b/components/layout/app-nav.tsx
@@ -45,7 +45,7 @@ export function AppNav({ items = appNavItems }: AppNavProps) {
 
   return (
     <nav
-      className="fixed inset-x-0 bottom-0 z-50 border-t-2 border-border bg-background/95 shadow-[0_-4px_0_0_hsl(280_45%_28%/0.35)] backdrop-blur supports-[backdrop-filter]:bg-background/90"
+      className="bottom-nav fixed inset-x-0 bottom-0 z-50 border-t-2 border-border bg-background/95 shadow-[0_-4px_0_0_hsl(280_45%_28%/0.35)] backdrop-blur supports-[backdrop-filter]:bg-background/90"
       style={{ height: "var(--bottom-nav-height)" }}
     >
       <div
@@ -68,15 +68,20 @@ export function AppNav({ items = appNavItems }: AppNavProps) {
             <Link
               key={item.href}
               href={item.href}
+              aria-label={item.label}
+              title={item.label}
               className={cn(
-                "flex flex-col items-center justify-center gap-1.5 border-2 px-1 py-2 text-[9px] leading-none transition-all duration-75",
+                "bottom-nav-item flex flex-col items-center justify-center gap-1.5 border-2 px-1 py-2 text-[9px] leading-none transition-all duration-75",
                 isActive
                   ? "border-secondary bg-primary text-primary-foreground shadow-[var(--retro-shadow-sm)] -translate-y-0.5"
                   : "border-transparent text-muted-foreground hover:border-border hover:bg-muted hover:text-foreground hover:-translate-y-0.5",
               )}
             >
-              <Icon className="h-5 w-5 shrink-0" strokeWidth={2.5} />
-              <span className="max-w-full truncate uppercase tracking-wide">
+              <Icon
+                className="bottom-nav-item-icon h-5 w-5 shrink-0"
+                strokeWidth={2.5}
+              />
+              <span className="bottom-nav-item-label max-w-full truncate uppercase tracking-wide">
                 {item.shortLabel}
               </span>
             </Link>
@@ -85,4 +90,4 @@ export function AppNav({ items = appNavItems }: AppNavProps) {
       </div>
     </nav>
   );
-}
\ No newline at end of file
+}