feat(web): make Web UI responsive for mobile

- Nav: icons only on mobile, icon+label on sm+
- Brand: abbreviated "H A" on mobile, full "Hermes Agent" on sm+
- Content: reduced padding on mobile (px-3 vs px-6)
- StatusPage: session cards stack vertically on mobile, truncate
  overflow text, strip model namespace for brevity
- ConfigPage: sidebar becomes horizontal scrollable pills on mobile
  instead of fixed left column, search hidden on mobile
- SessionsPage: title + search stack vertically on mobile, search
  goes full-width
- Card component: add overflow-hidden to prevent content bleed
- Body/root: add overflow-x-hidden to prevent horizontal scroll
- Footer: reduced font sizes on mobile

All changes use Tailwind responsive breakpoints (sm: prefix).
No logic changes — purely layout/CSS adjustments.

web/src/App.tsx

@@ -51,7 +51,7 @@ export default function App() {
   const PageComponent = PAGE_COMPONENTS[page];
 
   return (
-    <div className="flex min-h-screen flex-col bg-background text-foreground">
+    <div className="flex min-h-screen flex-col bg-background text-foreground overflow-x-hidden">
       {/* Global grain + warm glow (matches landing page) */}
       <div className="noise-overlay" />
       <div className="warm-glow" />
@@ -59,31 +59,31 @@ export default function App() {
       {/* ---- Header with grid-border nav ---- */}
       <header className="sticky top-0 z-40 border-b border-border bg-background/90 backdrop-blur-sm">
         <div className="mx-auto flex h-12 max-w-[1400px] items-stretch">
-          {/* Brand */}
-          <div className="flex items-center border-r border-border px-5 shrink-0">
-            <span className="font-collapse text-xl font-bold tracking-wider uppercase blend-lighter">
-              Hermes<br className="hidden sm:inline" /><span className="sm:hidden"> </span>Agent
+          {/* Brand — abbreviated on mobile */}
+          <div className="flex items-center border-r border-border px-3 sm:px-5 shrink-0">
+            <span className="font-collapse text-lg sm:text-xl font-bold tracking-wider uppercase blend-lighter">
+              H<span className="hidden sm:inline">ermes </span>A<span className="hidden sm:inline">gent</span>
             </span>
           </div>
 
-          {/* Nav grid — Mondwest labels like the landing page nav */}
+          {/* Nav — icons only on mobile, icon+label on sm+ */}
           <nav className="flex items-stretch overflow-x-auto scrollbar-none">
             {NAV_ITEMS.map(({ id, label, icon: Icon }) => (
               <button
                 key={id}
                 type="button"
                 onClick={() => setPage(id)}
-                className={`group relative inline-flex items-center gap-1.5 border-r border-border px-4 py-2 font-display text-[0.8rem] tracking-[0.12em] uppercase whitespace-nowrap transition-colors cursor-pointer shrink-0 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring ${
+                className={`group relative inline-flex items-center gap-1 sm:gap-1.5 border-r border-border px-2.5 sm:px-4 py-2 font-display text-[0.65rem] sm:text-[0.8rem] tracking-[0.12em] uppercase whitespace-nowrap transition-colors cursor-pointer shrink-0 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring ${
                   page === id
                     ? "text-foreground"
                     : "text-muted-foreground hover:text-foreground"
                 }`}
               >
-                <Icon className="h-3.5 w-3.5" />
-                {label}
+                <Icon className="h-4 w-4 sm:h-3.5 sm:w-3.5 shrink-0" />
+                <span className="hidden sm:inline">{label}</span>
                 {/* Hover highlight */}
                 <span className="absolute inset-0 bg-foreground pointer-events-none transition-opacity duration-150 group-hover:opacity-5 opacity-0" />
-                {/* Active indicator — dither bar */}
+                {/* Active indicator */}
                 {page === id && (
                   <span className="absolute bottom-0 left-0 right-0 h-px bg-foreground" />
                 )}
@@ -91,8 +91,8 @@ export default function App() {
             ))}
           </nav>
 
-          {/* Version badge */}
-          <div className="ml-auto flex items-center px-4 text-muted-foreground">
+          {/* Version badge — hidden on mobile */}
+          <div className="ml-auto hidden sm:flex items-center px-4 text-muted-foreground">
             <span className="font-display text-[0.7rem] tracking-[0.15em] uppercase opacity-50">
               Web UI
             </span>
@@ -102,7 +102,7 @@ export default function App() {
 
       <main
         key={animKey}
-        className="relative z-2 mx-auto w-full max-w-[1400px] flex-1 px-6 py-8"
+        className="relative z-2 mx-auto w-full max-w-[1400px] flex-1 px-3 sm:px-6 py-4 sm:py-8"
         style={{ animation: "fade-in 150ms ease-out" }}
       >
         <PageComponent />
@@ -110,11 +110,11 @@ export default function App() {
 
       {/* ---- Footer ---- */}
       <footer className="relative z-2 border-t border-border">
-        <div className="mx-auto flex max-w-[1400px] items-center justify-between px-6 py-3">
-          <span className="font-display text-[0.8rem] tracking-[0.12em] uppercase opacity-50">
+        <div className="mx-auto flex max-w-[1400px] items-center justify-between px-3 sm:px-6 py-3">
+          <span className="font-display text-[0.7rem] sm:text-[0.8rem] tracking-[0.12em] uppercase opacity-50">
             Hermes Agent
           </span>
-          <span className="font-display text-[0.7rem] tracking-[0.15em] uppercase text-foreground/40">
+          <span className="font-display text-[0.6rem] sm:text-[0.7rem] tracking-[0.15em] uppercase text-foreground/40">
             Nous Research
           </span>
         </div>