Responsive header: two-row layout on mobile

src/components/Header.tsx

@@ -52,12 +52,14 @@ export function Header() {
           <div className="logo-sub">homelab dashboard</div>
         </div>
       </div>
-      <div className="topbar-right">
+
       <nav className="nav-tabs">
         <NavLink to="/home"      className={({ isActive }) => `nav-tab${isActive ? ' nav-tab-active' : ''}`}>Home</NavLink>
         <NavLink to="/dashboard" className={({ isActive }) => `nav-tab${isActive ? ' nav-tab-active' : ''}`}>Dashboard</NavLink>
         <NavLink to="/apps"      className={({ isActive }) => `nav-tab${isActive ? ' nav-tab-active' : ''}`}>Apps</NavLink>
       </nav>
+
+      <div className="topbar-right">
         {weather && (
           <div className="weather-inline">
             <span className="weather-emoji">{weatherEmoji(weather.code)}</span>

src/index.css

@@ -249,11 +249,44 @@ header {
 }
 
 /* ── Responsive ── */
-@media (max-width: 540px) {
+@media (max-width: 640px) {
   .shell { padding: 0 14px 32px; }
   .stat-value { font-size: 18px; }
-  .clock-time { font-size: 16px; }
+
-  .topbar-right { gap: 12px; }
+  /* Two-row header: [logo · clock] then [nav full-width] */
+  header {
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 8px;
+    padding: 12px 0 10px;
+    margin-bottom: 16px;
+  }
+
+  /* Logo shrinks */
+  .logo-sub  { display: none; }
+  .logo-text { font-size: 15px; }
+
+  /* Clock: time only, no date */
+  .clock-time { font-size: 15px; letter-spacing: 0.5px; }
+  .clock-date { display: none; }
+
+  /* Weather hidden — full card already on /home */
+  .weather-inline { display: none !important; }
+
+  /* topbar-right (clock) pushed to far right on row 1 */
+  .topbar-right { margin-left: auto; gap: 0; }
+
+  /* Nav drops to row 2, spans full width */
+  .nav-tabs {
+    order: 10;
+    flex-basis: 100%;
+    justify-content: stretch;
+  }
+  .nav-tab {
+    flex: 1;
+    justify-content: center;
+    text-align: center;
+  }
 }
 
 /* ── Nav tabs ── */