From ba2d68105ac68520f6774b3a0483c7a7b8978335 Mon Sep 17 00:00:00 2001
From: DBT <nvue.dev@gmail.com>
Date: Thu, 26 Feb 2026 00:31:11 +0000
Subject: [PATCH] webui mobile polish: compact header/status and improve
 dashboard spacing

---
 webui/src/components/Header.tsx | 18 +++++++++---------
 webui/src/pages/Dashboard.tsx   |  8 ++++----
 2 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/webui/src/components/Header.tsx b/webui/src/components/Header.tsx
index b452897..f5245d7 100644
--- a/webui/src/components/Header.tsx
+++ b/webui/src/components/Header.tsx
@@ -13,20 +13,20 @@ const Header: React.FC = () => {
   };
 
   return (
-    <header className="h-16 border-b border-zinc-800 bg-zinc-900/50 flex items-center justify-between px-6 shrink-0 z-10">
-      <div className="flex items-center gap-3">
+    <header className="h-14 md:h-16 border-b border-zinc-800 bg-zinc-900/70 flex items-center justify-between px-3 md:px-6 shrink-0 z-10">
+      <div className="flex items-center gap-2 md:gap-3 min-w-0">
         <button className="md:hidden p-2 rounded-lg hover:bg-zinc-800 text-zinc-300" onClick={() => setSidebarOpen(true)}>
           <Menu className="w-5 h-5" />
         </button>
-        <div className="w-9 h-9 rounded-xl bg-indigo-500 flex items-center justify-center shadow-lg shadow-indigo-500/20">
-          <Terminal className="w-5 h-5 text-white" />
+        <div className="w-8 h-8 md:w-9 md:h-9 rounded-xl bg-indigo-500 flex items-center justify-center shadow-lg shadow-indigo-500/20 shrink-0">
+          <Terminal className="w-4 h-4 md:w-5 md:h-5 text-white" />
         </div>
-        <span className="font-semibold text-xl tracking-tight">ClawGo</span>
+        <span className="font-semibold text-lg md:text-xl tracking-tight truncate">ClawGo</span>
       </div>
       
-      <div className="flex items-center gap-6">
-        <div className="flex items-center gap-2.5 bg-zinc-900 border border-zinc-800 px-3 py-1.5 rounded-lg">
-          <span className="text-sm font-medium text-zinc-400">{t('gatewayStatus')}:</span>
+      <div className="flex items-center gap-2 md:gap-6">
+        <div className="flex items-center gap-1.5 md:gap-2.5 bg-zinc-900 border border-zinc-800 px-2 md:px-3 py-1 rounded-lg max-w-[140px] md:max-w-none overflow-hidden">
+          <span className="hidden md:inline text-sm font-medium text-zinc-400">{t('gatewayStatus')}:</span>
           {isGatewayOnline ? (
             <div className="flex items-center gap-1.5 bg-emerald-500/10 text-emerald-400 px-2.5 py-0.5 rounded-md text-xs font-semibold border border-emerald-500/20">
               <div className="w-1.5 h-1.5 rounded-full bg-emerald-500 shadow-[0_0_8px_rgba(16,185,129,0.8)]" />
@@ -40,7 +40,7 @@ const Header: React.FC = () => {
           )}
         </div>
         
-        <div className="h-5 w-px bg-zinc-800" />
+        <div className="hidden md:block h-5 w-px bg-zinc-800" />
         
         <button 
           onClick={toggleLang}
diff --git a/webui/src/pages/Dashboard.tsx b/webui/src/pages/Dashboard.tsx
index 9fa1104..69c8671 100644
--- a/webui/src/pages/Dashboard.tsx
+++ b/webui/src/pages/Dashboard.tsx
@@ -18,10 +18,10 @@ const Dashboard: React.FC = () => {
   }, [nodes]);
 
   return (
-    <div className="p-8 max-w-7xl mx-auto space-y-8">
-      <div className="flex items-center justify-between">
-        <h1 className="text-2xl font-semibold tracking-tight">{t('dashboard')}</h1>
-        <button onClick={refreshAll} className="flex items-center gap-2 px-4 py-2 bg-zinc-800 hover:bg-zinc-700 rounded-lg text-sm font-medium transition-colors">
+    <div className="p-4 md:p-8 max-w-7xl mx-auto space-y-5 md:space-y-8">
+      <div className="flex items-center justify-between gap-3">
+        <h1 className="text-xl md:text-2xl font-semibold tracking-tight">{t('dashboard')}</h1>
+        <button onClick={refreshAll} className="flex items-center gap-2 px-3 md:px-4 py-2 bg-zinc-800 hover:bg-zinc-700 rounded-lg text-sm font-medium transition-colors shrink-0">
           <RefreshCw className="w-4 h-4" /> {t('refreshAll')}
         </button>
       </div>