Card layout for tables on phones and tablets; fit terminal bar

Sideways-scrolling tables only showed a few of the 11 columns at a time on
a phone or iPad. Below 1100px (where the nav already collapses) each row
now renders as a card: the device as the title and every other column as
a labelled line, one card per row on phones and two or more on tablets.

- web/mobile.js copies column names onto cells (data-label) for the cards
  and re-applies them as the dashboard re-renders; no-op on wide screens
- Column filters fold behind a "Show filters" button with an active count
- Custom View keeps its sort/filter header as a strip of chips
- Terminal: Follow and the "your actions (simulated)" legend move into the
  terminal window's title bar; tabs read "Server" / "Worker" on phones, so
  LIVE, the legend and Follow are all visible on small screens

web/demo/demo.css

@@ -42,9 +42,12 @@ body.usmt-term-open { padding-bottom: calc(var(--usmt-term-h, 340px) + 72px); }
 .usmt-term-window { height: var(--usmt-term-h); display: flex; flex-direction: column; background: #012456; }
 .usmt-term.collapsed .usmt-term-window { display: none; }
 .usmt-term-titlebar {
-    height: 26px; flex: 0 0 26px; display: flex; align-items: center; padding: 0 12px;
+    height: 32px; flex: 0 0 32px; display: flex; align-items: center; gap: 10px; padding: 0 8px 0 12px;
     background: #0c0c0c; color: #cccccc; font-size: 0.78em; border-bottom: 1px solid #1b1b1b;
 }
+.usmt-term-wtitle { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.usmt-term-titlebar .usmt-term-legend { font-size: 1em; }
+.usmt-term-titlebar .usmt-term-follow { font-size: 1em; padding: 3px 10px; }
 .usmt-term-screens { flex: 1; min-height: 0; position: relative; }
 .usmt-term-body {
     display: none; position: absolute; inset: 0; overflow: auto; padding: 8px 12px 14px 18px;
@@ -103,12 +106,11 @@ body.usmt-term-open { padding-bottom: calc(var(--usmt-term-h, 340px) + 72px); }
 .usmt-demo-actions .usmt-demo-reset { color: #e74c3c; border-color: #e74c3c; margin-right: auto; }
 
 @media (max-width: 700px) {
-    .usmt-term-legend, .usmt-term-follow { display: none; }
+    .t-long { display: none; }                             /* "Server" / "Worker", shorter titles */
-    .usmt-term-bar { gap: 4px; padding: 0 6px; }
+    .usmt-term-bar { gap: 4px; padding: 0 8px; }
     .usmt-term-toggle { padding: 4px 6px; }
-    .usmt-term-tabs { flex: 1 1 auto; overflow: hidden; }
+    .usmt-term-tabs { flex: 0 1 auto; min-width: 0; }
-    .usmt-term-tab { padding: 4px 6px; font-size: 0.72em; }
+    .usmt-term-tab { padding: 4px 10px; font-size: 0.8em; }
-    .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; }

web/demo/demo.js

@@ -89,11 +89,13 @@
                     </button>
                     <div class="usmt-term-tabs"></div>
                     <span class="usmt-term-live" title="Streaming the real PowerShell console output from the server"><i></i>LIVE</span>
-                    ${this.demo ? '<span class="usmt-term-legend" title="Lines marked with a dot were produced by your own actions. They are simulated in your browser and never reach the real services."><i class="usmt-term-legend-dot"></i>your actions (simulated)</span>' : ''}
-                    <button class="usmt-term-btn usmt-term-follow active" type="button" title="Auto-scroll">Follow</button>
                 </div>
                 <div class="usmt-term-window">
-                    <div class="usmt-term-titlebar"><span class="usmt-term-wtitle"></span></div>
+                    <div class="usmt-term-titlebar">
+                        <span class="usmt-term-wtitle"></span>
+                        ${this.demo ? '<span class="usmt-term-legend" title="Lines marked with a dot were produced by your own actions. They are simulated in your browser and never reach the real services."><i class="usmt-term-legend-dot"></i><span class="t-long">your actions&nbsp;</span>(simulated)</span>' : ''}
+                        <button class="usmt-term-btn usmt-term-follow active" type="button" title="Keep scrolled to the newest output">Follow</button>
+                    </div>
                     <div class="usmt-term-screens"></div>
                 </div>`;
             document.body.appendChild(dock);
@@ -103,7 +105,11 @@
             const screens = dock.querySelector('.usmt-term-screens');
             TERMINALS.forEach(t => {
                 const b = document.createElement('button');
-                b.type = 'button'; b.className = 'usmt-term-tab'; b.dataset.id = t.id; b.textContent = t.title;
+                b.type = 'button'; b.className = 'usmt-term-tab'; b.dataset.id = t.id; b.title = t.title;
+                // "USMT-Server.ps1" on wide screens, just "Server" on phones
+                const m = t.title.match(/^(USMT-)(.+)(\.ps1)$/);
+                if (m) b.innerHTML = `<span class="t-long">${m[1]}</span>${m[2]}<span class="t-long">${m[3]}</span>`;
+                else b.textContent = t.title;
                 b.onclick = () => { this.select(t.id); if (!this.open) this.toggle(true); };
                 tabs.appendChild(b);
                 const body = document.createElement('div');
@@ -143,7 +149,10 @@
             this.el.querySelectorAll('.usmt-term-tab').forEach(b => b.classList.toggle('active', b.dataset.id === id));
             this.el.querySelectorAll('.usmt-term-body').forEach(b => b.classList.toggle('active', b.dataset.id === id));
             const t = TERMINALS.find(x => x.id === id);
-            this.el.querySelector('.usmt-term-wtitle').textContent = (this.demo ? 'Administrator: PowerShell (demo container) - ' : 'Administrator: PowerShell - ') + t.title;
+            const wtitle = this.el.querySelector('.usmt-term-wtitle');
+            wtitle.innerHTML = '<span class="t-long"></span><span></span>';
+            wtitle.firstChild.textContent = this.demo ? 'Administrator: PowerShell (demo container) - ' : 'Administrator: PowerShell - ';
+            wtitle.lastChild.textContent = t.title;
             this.el.querySelector(`.usmt-term-tab[data-id="${id}"]`).classList.remove('unread');
             try { localStorage.setItem('usmt_term_tab', id); } catch (e) {}
             this.poll(id);

web/index.html

@@ -352,6 +352,7 @@
         }
     </style>
     <link rel="stylesheet" href="/mobile.css">
+    <script src="/mobile.js"></script>
 </head>
 <body>
 

web/mobile.css

@@ -1,9 +1,117 @@
 /*
- * Small-screen layout for the dashboard (phones, small tablets, split windows).
+ * Small-screen layout for the dashboard (phones, tablets, narrow windows).
  * Loaded after the page's own <style> block. Desktop layouts are untouched: every rule
  * here is inside a max-width media query.
  */
 
+/* ---------------------------------------------------------------------------------------
+ *  Card view for data tables (phones and tablets)
+ *
+ *  An 11-column table can't be read on a phone or an iPad in portrait, and sideways
+ *  scrolling only ever shows a few columns. Below 1100px (where the nav also collapses)
+ *  each row becomes a card: the device name as its title and every other column as a
+ *  "label: value" line. mobile.js copies the column names onto the cells. Cards flow one
+ *  per row on phones and two or more on tablets. The column filter row becomes a filter
+ *  panel above the cards.
+ * ------------------------------------------------------------------------------------- */
+@media (max-width: 1100px) {
+    .table-wrapper { overflow-x: visible !important; }
+
+    table.master-table {
+        display: block; width: 100% !important; min-width: 0 !important; max-width: none !important;
+        table-layout: auto; font-size: 0.9em;
+    }
+    table.master-table colgroup { display: none; }
+    table.master-table thead { display: block; }
+    table.master-table thead tr.card-label-row,
+    table.master-table thead tr.card-aux-row { display: none; }
+
+    /* Filters: a wrapping panel of labeled controls */
+    table.master-table thead tr.filter-row {
+        display: flex; flex-wrap: wrap; gap: 8px 10px; padding: 10px 12px;
+        background: rgba(0,0,0,0.15); border-bottom: 1px solid var(--border-color);
+    }
+    table.master-table thead tr.filter-row th {
+        display: block; flex: 1 1 150px; min-width: 0; width: auto !important;
+        padding: 0; border: 0; background: transparent;
+    }
+    table.master-table thead tr.filter-row th:empty,
+    table.master-table thead tr.filter-row th[data-label=""] { display: none; }
+    table.master-table thead tr.filter-row th::before {
+        content: attr(data-label); display: block; margin-bottom: 3px;
+        font-size: 0.78em; font-weight: 600; color: var(--text-muted);
+    }
+
+    /* Custom View keeps its header (sort / filter / remove buttons) as a strip of chips */
+    #table-custom thead tr.card-label-row {
+        display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 12px;
+        background: var(--table-header-bg);
+    }
+    #table-custom thead tr.card-label-row th {
+        display: flex; align-items: center; gap: 4px; width: auto !important; min-width: 0 !important;
+        padding: 4px 8px; border: 1px solid rgba(255,255,255,0.2); border-radius: 999px;
+        position: static; white-space: nowrap;
+    }
+
+    /* Rows -> cards */
+    table.master-table tbody {
+        display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr));
+        gap: 10px; padding: 10px;
+    }
+    table.master-table tbody tr {
+        display: block; position: relative;
+        background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 8px;
+        padding: 10px 12px; box-shadow: 0 2px 5px rgba(0,0,0,0.25);
+    }
+    /* Label in a fixed left gutter, value flows to its right (so a value made of several
+       pieces - a name plus its copy icon, a list with links - stays one value) */
+    table.master-table tbody td {
+        display: block; position: relative; min-height: 1.3em;
+        padding: 6px 0 6px 9.2em; border: 0; border-bottom: 1px solid var(--border-light);
+        width: auto !important; max-width: none !important; height: auto !important;
+        white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere;
+    }
+    table.master-table tbody td::before {
+        content: attr(data-label); position: absolute; left: 0; top: 6px; width: 8.6em;
+        font-size: 0.85em; font-weight: 600; color: var(--text-muted); line-height: 1.35;
+    }
+    table.master-table tbody td:last-child { border-bottom: 0; }
+
+    /* First column (the device) is the card's title */
+    table.master-table tbody td:first-child {
+        display: block; font-size: 1.12em; font-weight: 700; padding: 0 34px 8px 0; min-height: 0;
+    }
+    table.master-table tbody td:first-child::before { content: none; }
+
+    /* The per-row copy button has no column name: pin it to the card's corner */
+    table.master-table tbody td[data-label=""]:not(:first-child) {
+        position: absolute; top: 8px; right: 8px; display: block; padding: 0; border: 0;
+    }
+    table.master-table tbody td[data-label=""]::before { content: none; }
+
+    /* "No devices" style rows span the full card */
+    table.master-table tbody td[colspan] { display: block; text-align: center; border: 0; padding: 6px 0; }
+
+    /* Filters fold away behind a button (added by mobile.js) */
+    .card-filter-toggle {
+        display: inline-flex; align-items: center; gap: 6px; margin: 10px 12px 0;
+        background: transparent; color: var(--text-main); border: 1px solid var(--border-color);
+        border-radius: 6px; padding: 6px 12px; font: inherit; font-size: 0.85em; cursor: pointer;
+    }
+    .card-filter-toggle .count {
+        background: #3498db; color: #fff; border-radius: 999px; padding: 0 7px; font-size: 0.85em;
+    }
+    table.master-table:not(.show-filters) thead tr.filter-row { display: none; }
+    table.master-table.show-filters thead tr.filter-row { margin-top: 10px; }
+}
+@media (min-width: 1101px) {
+    .card-filter-toggle { display: none; }
+}
+@media (max-width: 420px) {
+    table.master-table tbody td { padding-left: 7.8em; }
+    table.master-table tbody td::before { width: 7.2em; }
+}
+
 @media (max-width: 900px) {
     .main { padding: 14px; }
     .main h1 { font-size: 1.55em; }
@@ -11,18 +119,8 @@
     /* 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 */
+    /* Group headers: title on one line, copy buttons wrap underneath */
-    .table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
+    .group-header { flex-wrap: wrap; gap: 8px; font-size: 1.05em; }
-    .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; }
 

web/mobile.js

@@ -0,0 +1,93 @@
+/*
+ * Card layout support for small screens.
+ *
+ * On phones and tablets (see mobile.css) each table row is shown as a card, with every
+ * cell rendered as "Column name: value". CSS can't look up a cell's column header, so
+ * this copies each header's text onto its cells as data-label. The dashboard re-renders
+ * its tables constantly, so labels are reapplied (once per frame at most) whenever the
+ * DOM changes. On wide screens it does nothing.
+ */
+(function () {
+    'use strict';
+
+    const cardsQuery = window.matchMedia('(max-width: 1100px)');
+    const clean = text => text.replace(/[\u2195\u25B2\u25BC\u00D7\u2715]/g, '').replace(/\s+/g, ' ').trim();
+
+    function labelTable(table) {
+        const thead = table.tHead;
+        if (!thead) return;
+
+        // The header row is the one with the most text (Custom View has a drag-handle row above it)
+        let headerRow = null, best = -1;
+        for (const row of thead.rows) {
+            if (row.classList.contains('filter-row')) continue;
+            const named = Array.from(row.cells).filter(c => clean(c.textContent)).length;
+            if (named > best) { best = named; headerRow = row; }
+        }
+        if (!headerRow) return;
+
+        for (const row of thead.rows) {
+            if (row === headerRow) row.classList.add('card-label-row');
+            else if (!row.classList.contains('filter-row')) row.classList.add('card-aux-row');
+        }
+
+        const labels = Array.from(headerRow.cells).map(c => clean(c.textContent));
+        const apply = row => {
+            Array.from(row.cells).forEach((cell, i) => {
+                const label = cell.colSpan > 1 ? '' : (labels[i] || '');
+                if (cell.dataset.label !== label) cell.dataset.label = label;
+            });
+        };
+        thead.querySelectorAll('tr.filter-row').forEach(apply);
+        for (const body of table.tBodies) for (const row of body.rows) apply(row);
+
+        addFilterToggle(table, thead.querySelector('tr.filter-row'));
+    }
+
+    // Column filters take a lot of room above every card group, so they fold behind a
+    // button that also shows how many filters are active.
+    function addFilterToggle(table, filterRow) {
+        if (!filterRow) return;
+        let btn = table.previousElementSibling;
+        if (!btn || !btn.classList.contains('card-filter-toggle')) {
+            btn = document.createElement('button');
+            btn.type = 'button';
+            btn.className = 'card-filter-toggle';
+            btn.addEventListener('click', () => { table.classList.toggle('show-filters'); updateToggle(table, btn); });
+            table.parentNode.insertBefore(btn, table);
+            filterRow.addEventListener('input', () => updateToggle(table, btn));
+            filterRow.addEventListener('change', () => updateToggle(table, btn));
+        }
+        updateToggle(table, btn);
+    }
+    function updateToggle(table, btn) {
+        const row = table.tHead && table.tHead.querySelector('tr.filter-row');
+        if (!row) return;
+        const active = Array.from(row.querySelectorAll('input[type="text"]')).filter(i => i.value.trim()).length
+                     + row.querySelectorAll('input[type="checkbox"]:checked').length;
+        const open = table.classList.contains('show-filters');
+        const html = `${open ? 'Hide' : 'Show'} filters${active ? ` <span class="count">${active}</span>` : ''}`;
+        if (btn.innerHTML !== html) btn.innerHTML = html;
+    }
+
+    let queued = false;
+    function run() {
+        queued = false;
+        if (!cardsQuery.matches) return;
+        document.querySelectorAll('table.master-table').forEach(labelTable);
+    }
+    function schedule() {
+        if (queued) return;
+        queued = true;
+        requestAnimationFrame(run);
+    }
+
+    function start() {
+        new MutationObserver(schedule).observe(document.body, { childList: true, subtree: true });
+        if (cardsQuery.addEventListener) cardsQuery.addEventListener('change', schedule);
+        else cardsQuery.addListener(schedule);
+        schedule();
+    }
+    if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', start);
+    else start();
+})();