From b3811ff72e7fdf5f031738ffe2669c972d52bf33 Mon Sep 17 00:00:00 2001
From: enricobuehler <buehler@unom.io>
Date: Sun, 21 Jun 2026 12:33:33 +0000
Subject: [PATCH] fix(web): session-card button overflow + bottom-nav icon
 alignment

- Dashboard session card: the header stacks the title above the action buttons
  on narrow screens (flex-col -> sm:flex-row) and the button group wraps
  (flex-wrap), so "Request IDR" / "Stop session" no longer overflow the card.
- Mobile bottom nav: give each label a fixed two-line-tall centered box so a
  1- or 2-line label (labels vary by locale) keeps every tab icon at the same
  height.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 web/src/components/app-shell.tsx | 6 +++++-
 web/src/routes/index.tsx         | 4 ++--
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/web/src/components/app-shell.tsx b/web/src/components/app-shell.tsx
index b866a24..68b5c60 100644
--- a/web/src/components/app-shell.tsx
+++ b/web/src/components/app-shell.tsx
@@ -80,7 +80,11 @@ export function AppShell({ children }: { children: ReactNode }) {
             activeProps={{ className: 'text-[var(--brand-light)]' }}
           >
             <Icon className="size-5 shrink-0" />
-            <span className="w-full text-center text-[10px] leading-tight">{label()}</span>
+            {/* Fixed two-line-tall box so a 1- or 2-line label keeps every icon
+                at the same height (the labels vary by locale). */}
+            <span className="flex h-7 w-full items-center justify-center text-center text-[10px] leading-tight">
+              {label()}
+            </span>
           </Link>
         ))}
       </nav>
diff --git a/web/src/routes/index.tsx b/web/src/routes/index.tsx
index ff8e537..35cebbf 100644
--- a/web/src/routes/index.tsx
+++ b/web/src/routes/index.tsx
@@ -60,12 +60,12 @@ function Dashboard() {
             </div>
 
             <Card>
-              <CardHeader className="flex-row items-center justify-between space-y-0">
+              <CardHeader className="flex flex-col items-start gap-3 space-y-0 sm:flex-row sm:items-center sm:justify-between">
                 <CardTitle className="flex items-center gap-2">
                   <MonitorPlay className="size-4" />
                   {m.status_session()}
                 </CardTitle>
-                <div className="flex gap-2">
+                <div className="flex flex-wrap gap-2">
                   <Button
                     variant="outline"
                     size="sm"