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:
1 parent
c1b107e264
commit
5a7fd4f2df
3 files changed
+91
-1
No files matched your search
+14
-1
@@ -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 */
|
||||
}
|
||||
Reference in new issue
Block a user