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
This commit is contained in:
Johan Sandoval committed 2026-10-06 16:10:43 +00:00
1 parent c1b107e264
commit 5a7fd4f2df
3 files changed
+91 -1

No files matched your search

+2
View File
@@ -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>