From 78fa75845182431e8b867bd80d36e88e092e6971 Mon Sep 17 00:00:00 2001
From: Agent <agents@kylefrench.dev>
Date: Mon, 13 Apr 2026 21:08:33 +0000
Subject: [PATCH] feat(web): make Web UI responsive for mobile
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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                | 32 ++++++++++++++--------------
 web/src/components/ui/card.tsx |  2 +-
 web/src/index.css              |  1 +
 web/src/pages/ConfigPage.tsx   | 16 +++++++-------
 web/src/pages/SessionsPage.tsx |  6 +++---
 web/src/pages/StatusPage.tsx   | 38 +++++++++++++++++-----------------
 6 files changed, 49 insertions(+), 46 deletions(-)

diff --git a/web/src/App.tsx b/web/src/App.tsx
index b2f76808ef..d52757c20f 100644
--- a/web/src/App.tsx
+++ b/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>
diff --git a/web/src/components/ui/card.tsx b/web/src/components/ui/card.tsx
index 7ff6a9aec0..be30cc0a16 100644
--- a/web/src/components/ui/card.tsx
+++ b/web/src/components/ui/card.tsx
@@ -4,7 +4,7 @@ export function Card({ className, ...props }: React.HTMLAttributes<HTMLDivElemen
   return (
     <div
       className={cn(
-        "border border-border bg-card/80 text-card-foreground",
+        "border border-border bg-card/80 text-card-foreground overflow-hidden w-full",
         className,
       )}
       {...props}
diff --git a/web/src/index.css b/web/src/index.css
index 7846e9f90e..20576ac50f 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -74,6 +74,7 @@ body {
   scrollbar-color: color-mix(in srgb, var(--color-foreground) 15%, transparent) transparent;
 }
 html, body {
+  overflow-x: hidden;
   scrollbar-color: color-mix(in srgb, var(--color-foreground) 25%, transparent) transparent;
 }
 ::-webkit-scrollbar { width: 4px; height: 4px; }
diff --git a/web/src/pages/ConfigPage.tsx b/web/src/pages/ConfigPage.tsx
index 2e75e1d1c5..1b227d1fbf 100644
--- a/web/src/pages/ConfigPage.tsx
+++ b/web/src/pages/ConfigPage.tsx
@@ -343,12 +343,12 @@ export default function ConfigPage() {
         </Card>
       ) : (
         /* ═══════════════ Form Mode ═══════════════ */
-        <div className="flex gap-4" style={{ minHeight: "calc(100vh - 180px)" }}>
-          {/* ---- Sidebar ---- */}
-          <div className="w-52 shrink-0">
-            <div className="sticky top-[72px] flex flex-col gap-1">
+        <div className="flex flex-col sm:flex-row gap-4" style={{ minHeight: "calc(100vh - 180px)" }}>
+          {/* ---- Sidebar — horizontal scroll on mobile, fixed column on sm+ ---- */}
+          <div className="sm:w-52 sm:shrink-0">
+            <div className="sm:sticky sm:top-[72px] flex flex-col gap-1">
               {/* Search */}
-              <div className="relative mb-2">
+              <div className="relative mb-2 hidden sm:block">
                 <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground" />
                 <Input
                   className="pl-8 h-8 text-xs"
@@ -367,8 +367,9 @@ export default function ConfigPage() {
                 )}
               </div>
 
-              {/* Category nav */}
-              {categories.map((cat) => {
+              {/* Category nav — horizontal scroll on mobile */}
+              <div className="flex sm:flex-col gap-1 overflow-x-auto sm:overflow-x-visible scrollbar-none pb-1 sm:pb-0">
+                {categories.map((cat) => {
                 const isActive = !isSearching && activeCategory === cat;
                 return (
                   <button
@@ -395,6 +396,7 @@ export default function ConfigPage() {
                   </button>
                 );
               })}
+              </div>
             </div>
           </div>
 
diff --git a/web/src/pages/SessionsPage.tsx b/web/src/pages/SessionsPage.tsx
index 6454ae0a65..c6efe0f2d0 100644
--- a/web/src/pages/SessionsPage.tsx
+++ b/web/src/pages/SessionsPage.tsx
@@ -227,7 +227,7 @@ function SessionRow({
               )}
             </div>
             <div className="flex items-center gap-1.5 text-xs text-muted-foreground">
-              <span className="truncate max-w-[180px]">{(session.model ?? "unknown").split("/").pop()}</span>
+              <span className="truncate max-w-[120px] sm:max-w-[180px]">{(session.model ?? "unknown").split("/").pop()}</span>
               <span className="text-border">&#183;</span>
               <span>{session.message_count} msgs</span>
               {session.tool_call_count > 0 && (
@@ -374,7 +374,7 @@ export default function SessionsPage() {
   return (
     <div className="flex flex-col gap-4">
       {/* Header outside card for lighter feel */}
-      <div className="flex items-center justify-between">
+      <div className="flex flex-col sm:flex-row sm:items-center gap-2 sm:justify-between">
         <div className="flex items-center gap-2">
           <MessageSquare className="h-5 w-5 text-muted-foreground" />
           <h1 className="text-base font-semibold">Sessions</h1>
@@ -382,7 +382,7 @@ export default function SessionsPage() {
             {total}
           </Badge>
         </div>
-        <div className="relative w-64">
+        <div className="relative w-full sm:w-64">
           {searching ? (
             <div className="absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 animate-spin rounded-full border-[1.5px] border-primary border-t-transparent" />
           ) : (
diff --git a/web/src/pages/StatusPage.tsx b/web/src/pages/StatusPage.tsx
index 06fb7c25ed..4e22239eb4 100644
--- a/web/src/pages/StatusPage.tsx
+++ b/web/src/pages/StatusPage.tsx
@@ -173,20 +173,20 @@ export default function StatusPage() {
             {activeSessions.map((s) => (
               <div
                 key={s.id}
-                className="flex items-center justify-between border border-border p-3"
+                className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 border border-border p-3 w-full"
               >
-                <div className="flex flex-col gap-1">
+                <div className="flex flex-col gap-1 min-w-0 w-full">
                   <div className="flex items-center gap-2">
-                    <span className="font-medium text-sm">{s.title ?? "Untitled"}</span>
+                    <span className="font-medium text-sm truncate">{s.title ?? "Untitled"}</span>
 
-                    <Badge variant="success" className="text-[10px]">
+                    <Badge variant="success" className="text-[10px] shrink-0">
                       <span className="mr-1 inline-block h-1.5 w-1.5 animate-pulse rounded-full bg-current" />
                       Live
                     </Badge>
                   </div>
 
-                  <span className="text-xs text-muted-foreground">
-                    <span className="font-mono-ui">{s.model ?? "unknown"}</span> · {s.message_count} msgs · {timeAgo(s.last_active)}
+                  <span className="text-xs text-muted-foreground truncate">
+                    <span className="font-mono-ui">{(s.model ?? "unknown").split("/").pop()}</span> · {s.message_count} msgs · {timeAgo(s.last_active)}
                   </span>
                 </div>
               </div>
@@ -208,23 +208,23 @@ export default function StatusPage() {
             {recentSessions.map((s) => (
               <div
                 key={s.id}
-                className="flex items-center justify-between border border-border p-3"
+                className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 border border-border p-3 w-full"
               >
-                <div className="flex flex-col gap-1">
-                  <span className="font-medium text-sm">{s.title ?? "Untitled"}</span>
+                <div className="flex flex-col gap-1 min-w-0 w-full">
+                  <span className="font-medium text-sm truncate">{s.title ?? "Untitled"}</span>
 
-                  <span className="text-xs text-muted-foreground">
-                    <span className="font-mono-ui">{s.model ?? "unknown"}</span> · {s.message_count} msgs · {timeAgo(s.last_active)}
+                  <span className="text-xs text-muted-foreground truncate">
+                    <span className="font-mono-ui">{(s.model ?? "unknown").split("/").pop()}</span> · {s.message_count} msgs · {timeAgo(s.last_active)}
                   </span>
 
                   {s.preview && (
-                    <span className="text-xs text-muted-foreground/70 truncate max-w-md">
+                    <span className="text-xs text-muted-foreground/70 truncate">
                       {s.preview}
                     </span>
                   )}
                 </div>
 
-                <Badge variant="outline" className="text-[10px]">
+                <Badge variant="outline" className="text-[10px] shrink-0 self-start sm:self-center">
                   <Database className="mr-1 h-3 w-3" />
                   {s.source ?? "local"}
                 </Badge>
@@ -258,10 +258,10 @@ function PlatformsCard({ platforms }: PlatformsCardProps) {
           return (
             <div
               key={name}
-              className="flex items-center justify-between border border-border p-3"
+              className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 border border-border p-3 w-full"
             >
-              <div className="flex items-center gap-3">
-                <IconComponent className={`h-4 w-4 ${
+              <div className="flex items-center gap-3 min-w-0 w-full">
+                <IconComponent className={`h-4 w-4 shrink-0 ${
                   info.state === "connected"
                     ? "text-success"
                     : info.state === "fatal"
@@ -269,8 +269,8 @@ function PlatformsCard({ platforms }: PlatformsCardProps) {
                       : "text-warning"
                 }`} />
 
-                <div className="flex flex-col gap-0.5">
-                  <span className="text-sm font-medium capitalize">{name}</span>
+                <div className="flex flex-col gap-0.5 min-w-0">
+                  <span className="text-sm font-medium capitalize truncate">{name}</span>
 
                   {info.error_message && (
                     <span className="text-xs text-destructive">{info.error_message}</span>
@@ -284,7 +284,7 @@ function PlatformsCard({ platforms }: PlatformsCardProps) {
                 </div>
               </div>
 
-              <Badge variant={display.variant}>
+              <Badge variant={display.variant} className="shrink-0 self-start sm:self-center">
                 {display.variant === "success" && (
                   <span className="mr-1 inline-block h-1.5 w-1.5 animate-pulse rounded-full bg-current" />
                 )}