From 88f561230e994335c7652e0e8af3a8d9e3e94b6a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Sat, 15 Aug 2026 20:36:55 +0200
Subject: [PATCH] Fix header horizontal overflow on mobile

The nav bar's brand text, both nav-link labels, the username, and the
logout label were all always rendered, easily exceeding a phone-width
viewport since nothing could shrink or wrap. Collapse to icon-only
below the sm breakpoint (labels stay in the DOM via sr-only so they're
still announced to screen readers, just not painted) and truncate a
long username instead of letting it force overflow.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 app/src/components/layout/nav.tsx | 20 +++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/app/src/components/layout/nav.tsx b/app/src/components/layout/nav.tsx
index aef8abc..cecaba3 100644
--- a/app/src/components/layout/nav.tsx
+++ b/app/src/components/layout/nav.tsx
@@ -29,14 +29,14 @@ export function Nav({
 
   return (
     <header className="border-b bg-background/95 sticky top-0 z-10 backdrop-blur">
-      <div className="mx-auto flex h-14 max-w-5xl items-center justify-between px-4">
-        <div className="flex items-center gap-6">
+      <div className="mx-auto flex h-14 max-w-5xl items-center justify-between gap-2 px-4">
+        <div className="flex min-w-0 items-center gap-3 sm:gap-6">
           <Link
             href="/"
-            className="flex items-center gap-2 font-semibold tracking-tight"
+            className="flex shrink-0 items-center gap-2 font-semibold tracking-tight"
           >
             <Terminal className="size-5" />
-            TriggerShell
+            <span className="hidden sm:inline">TriggerShell</span>
           </Link>
           <nav className="flex items-center gap-1">
             {links.map(({ href, label, icon: Icon }) => (
@@ -44,22 +44,24 @@ export function Nav({
                 key={href}
                 href={href}
                 className={cn(
-                  "text-muted-foreground hover:text-foreground flex items-center gap-1.5 rounded-md px-3 py-1.5 text-sm font-medium transition-colors",
+                  "text-muted-foreground hover:text-foreground flex items-center gap-1.5 rounded-md px-2 py-1.5 text-sm font-medium transition-colors sm:px-3",
                   pathname === href && "bg-muted text-foreground",
                 )}
               >
                 <Icon className="size-4" />
-                {label}
+                <span className="sr-only sm:not-sr-only">{label}</span>
               </Link>
             ))}
           </nav>
         </div>
         {authEnabled && (
-          <div className="flex items-center gap-3">
-            <span className="text-muted-foreground text-sm">{username}</span>
+          <div className="flex shrink-0 items-center gap-2 sm:gap-3">
+            <span className="text-muted-foreground hidden max-w-32 truncate text-sm sm:inline-block">
+              {username}
+            </span>
             <Button variant="ghost" size="sm" onClick={handleLogout}>
               <LogOut className="size-4" />
-              Log out
+              <span className="sr-only sm:not-sr-only">Log out</span>
             </Button>
           </div>
         )}