From 5a7fd4f2df8425e83b6a7b4cc3a05123859946c1 Mon Sep 17 00:00:00 2001
From: Johan Sandoval <jojo.han718@gmail.com>
Date: Tue, 6 Oct 2026 16:10:43 +0000
Subject: [PATCH] Make the dashboard usable on phones and tablets

- Add the missing viewport meta tag; phones were rendering the desktop
  layout at 980px and shrinking it
- Add web/mobile.css (all rules inside max-width media queries, so desktop
  is unchanged):
  - data tables keep readable column widths and scroll sideways in their card
  - group headers wrap their copy buttons and stay put while tables scroll
  - Tracked Devices cards and the Documentation sidebar stack vertically
  - modals fit the screen below the fixed nav; Advanced View's three
    columns stack and the dialog scrolls as one
  - 16px inputs on phones so iOS doesn't zoom on focus
- Terminal bar: compact tabs and a dot-only LIVE indicator on narrow
  screens, taller panel in phone landscape, tighter demo dialog
---
 web/demo/demo.css | 15 +++++++++-
 web/index.html    |  2 ++
 web/mobile.css    | 75 +++++++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 91 insertions(+), 1 deletion(-)
 create mode 100644 web/mobile.css

diff --git a/web/demo/demo.css b/web/demo/demo.css
index f850065..d3f8191 100644
--- a/web/demo/demo.css
+++ b/web/demo/demo.css
@@ -104,6 +104,19 @@ body.usmt-term-open { padding-bottom: calc(var(--usmt-term-h, 340px) + 72px); }
 
 @media (max-width: 700px) {
     .usmt-term-legend, .usmt-term-follow { display: none; }
-    .usmt-term-tab { padding: 4px 6px; font-size: 0.75em; }
+    .usmt-term-bar { gap: 4px; padding: 0 6px; }
+    .usmt-term-toggle { padding: 4px 6px; }
+    .usmt-term-tabs { flex: 1 1 auto; overflow: hidden; }
+    .usmt-term-tab { padding: 4px 6px; font-size: 0.72em; }
+    .usmt-term-live { font-size: 0; gap: 0; }               /* just the pulsing dot */
     .usmt-term { --usmt-term-h: 45vh; }
+    .usmt-term-body { font-size: 11.5px; padding: 6px 8px 10px 14px; }
+    .usmt-term-titlebar { font-size: 0.7em; }
+    .usmt-demo-card { padding: 18px 16px; }
+    .usmt-demo-card h2 { font-size: 1.25em; }
+    .usmt-demo-actions button { flex: 1 1 auto; }
+    .usmt-demo-actions .usmt-demo-reset { margin-right: 0; }
+}
+@media (max-height: 500px) {
+    .usmt-term { --usmt-term-h: 55vh; }                   /* phones in landscape */
 }
diff --git a/web/index.html b/web/index.html
index e6839c3..021ac60 100755
--- a/web/index.html
+++ b/web/index.html
@@ -2,6 +2,7 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>USMT Dash</title>
     <link rel="icon" href="/favicon.png" type="image/png">
 
@@ -350,6 +351,7 @@
             .status-btn:hover { color: white; background: rgba(255,255,255,0.1); }
         }
     </style>
+    <link rel="stylesheet" href="/mobile.css">
 </head>
 <body>
 
diff --git a/web/mobile.css b/web/mobile.css
new file mode 100644
index 0000000..2a8862b
--- /dev/null
+++ b/web/mobile.css
@@ -0,0 +1,75 @@
+/*
+ * Small-screen layout for the dashboard (phones, small tablets, split windows).
+ * Loaded after the page's own <style> block. Desktop layouts are untouched: every rule
+ * here is inside a max-width media query.
+ */
+
+@media (max-width: 900px) {
+    .main { padding: 14px; }
+    .main h1 { font-size: 1.55em; }
+
+    /* Page headers with an action button (Workbench, All Devices) wrap instead of squeezing */
+    .header-row { flex-wrap: wrap; gap: 10px; }
+
+    /* Data tables keep readable column widths and scroll sideways inside their card */
+    .table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
+    .master-table:not(#table-custom) { min-width: 880px; }
+    #table-software { min-width: 760px; }
+    .stack-box .master-table { min-width: 760px; }
+
+    /* Group headers: title on one line, copy buttons wrap underneath, and stay in view
+       while the table under them scrolls sideways */
+    .group-header {
+        flex-wrap: wrap; gap: 8px; font-size: 1.05em;
+        position: sticky; left: 0;
+    }
+    .group-header > div { flex-wrap: wrap; }
+    .copy-table-btn { padding: 5px 9px; font-size: 0.78em; }
+
+    /* Tracked Devices: the two cards stack full width */
+    .roster-box, .tags-box { min-width: 0 !important; max-width: none !important; flex-basis: 100% !important; }
+
+    /* Documentation: article list above the article instead of beside it */
+    #docs > div { height: auto !important; }
+    #docs > div > div:last-child { flex-direction: column !important; }
+    #docs > div > div:last-child > div:first-child {
+        width: auto !important; min-width: 0 !important; max-height: 38vh;
+    }
+    #docs > div > div:last-child > div:last-child { min-height: 60vh; }
+    #docContent img { max-width: 100%; height: auto; }
+    #docContent table { display: block; overflow-x: auto; }
+    #docContent pre { overflow-x: auto; }
+    #docToolbar { flex-wrap: wrap; gap: 8px; }
+
+    /* Modals fill the screen width and scroll inside themselves */
+    .modal-content {
+        width: auto !important; max-width: none !important;
+        margin: 70px 10px 10px !important;           /* clear the fixed 60px top nav */
+        max-height: calc(100vh - 80px) !important;
+        max-height: calc(100dvh - 80px) !important;
+    }
+    .modal-header { padding: 14px 14px 8px; }
+    .modal-header h2 { font-size: 1.2em; word-break: break-all; }
+
+    /* Device details: Advanced View's source / overview / destination columns stack,
+       and the whole dialog scrolls instead of each column scrolling separately */
+    #detailsModal .modal-content { height: auto !important; overflow-y: auto !important; display: block !important; }
+    #detailsBody { display: block !important; padding: 10px !important; clear: both; }   /* clear the floated header buttons */
+    #detailsBody > div[style*="display: flex"] { flex-direction: column !important; padding: 0 !important; gap: 12px !important; }
+    #detailsBody [style*="overflow-y: auto"] { overflow: visible !important; flex: none !important; }
+    #detailsBody > div[style*="display: flex"] > div { width: 100% !important; flex: none !important; }
+    #detailsModal .modal-content td { white-space: normal; word-break: break-word; }
+
+    /* Custom View toolbar buttons wrap */
+    #custom button { flex-shrink: 0; }
+    #custom > div { flex-wrap: wrap; }
+}
+
+@media (max-width: 600px) {
+    /* iOS zooms into any focused input under 16px; keep fields at 16px on phones */
+    input[type="text"], textarea, select { font-size: 16px !important; }
+
+    .main h1 { font-size: 1.35em; }
+    .group-header { font-size: 0.98em; padding: 8px 10px; }
+    .modal-content { margin: 66px 6px 6px !important; max-height: calc(100dvh - 72px) !important; }
+}