From f5b255ee68e412697515af9f387dcd3c5bdf0f13 Mon Sep 17 00:00:00 2001
From: archipelago <archipelago@localhost>
Date: Sat, 12 Sep 2026 15:31:04 -0400
Subject: [PATCH] style(cuprate-ui): improve mobile dashboard layout

---
 docker/cuprate-ui/index.html | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/docker/cuprate-ui/index.html b/docker/cuprate-ui/index.html
index 4e09fcf2..4bdf3c65 100644
--- a/docker/cuprate-ui/index.html
+++ b/docker/cuprate-ui/index.html
@@ -72,7 +72,16 @@
         .tab-btn:hover { color:#fff; background:rgba(255,255,255,.06); }
         .tab-btn.active { color:#fff; background:linear-gradient(135deg,rgba(247,147,26,.3),rgba(255,255,255,.08)); box-shadow:inset 0 1px 0 rgba(255,255,255,.15); }
         [data-panel].tab-hidden { display:none; }
-        @media (max-width:700px) { .app-header, .app-header-id, .app-header-actions { justify-content:center; } .app-header-text { text-align:center; } .app-header-actions > .info-card { flex:1 1 8rem; } }
+        @media (max-width:700px) {
+            .wrap { padding:1rem 1rem calc(6.75rem + env(safe-area-inset-bottom, 0px)); }
+            .app-header { flex-direction:column; align-items:stretch; gap:1rem; }
+            .app-header-id { flex-direction:column; justify-content:center; text-align:center; }
+            .app-header-text { text-align:center; }
+            .app-header-actions { flex-direction:column; align-items:stretch; gap:.6rem; }
+            .app-header-actions > .info-card { width:100%; }
+            .tabbar { position:fixed; left:.75rem; right:.75rem; bottom:calc(.5rem + env(safe-area-inset-bottom, 0px)); z-index:40; margin:0; padding:.35rem; border-radius:1rem; box-shadow:0 10px 30px rgba(0,0,0,.65); }
+            .tab-btn { min-width:4.5rem; padding:.7rem .5rem; font-size:.7rem; }
+        }
 
         header { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
         header h1 { font-size: 1.6rem; font-weight: 700; letter-spacing: -0.02em; }