Size the proxy columns by proportion, so nothing can outgrow the page

Plugin/unraid/pages/auth.php

@@ -79,11 +79,7 @@ require_once dirname(__DIR__) . '/include/ai_chat.php';
 
 /* ── Panels ──────────────────────────────────────────────────────────────── */
 .vv-au-panel    { display:none; }
-/* min-width:0 because a panel may be laid out as a flex or grid item, whose default min-width:auto
+.vv-au-panel.active { display:block; }
-   means "never shrink below your content". The Proxies table is deliberately allowed to exceed the
-   page width and scroll inside its own container; without this that width propagates upward and
-   widens the panel instead. */
-.vv-au-panel.active { display:block;min-width:0; }
 
 /* ── Tables ──────────────────────────────────────────────────────────────── */
 .vv-au-tbl      { width:100%;border-collapse:collapse;font-size:11px; }
@@ -106,7 +102,7 @@ require_once dirname(__DIR__) . '/include/ai_chat.php';
 .vv-au-badge.host { background:#111;border:1px solid #1e1e1e;color:#444; }
 
 /* ── Cards ───────────────────────────────────────────────────────────────── */
-.vv-au-card     { background:#161616;border:1px solid #222;border-radius:6px;overflow:hidden;min-width:0; }
+.vv-au-card     { background:#161616;border:1px solid #222;border-radius:6px;overflow:hidden; }
 .vv-au-card-h   { display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid #1e1e1e;background:#111; }
 .vv-au-card-title { font-size:11px;font-weight:bold;color:#666;text-transform:uppercase;letter-spacing:.06em;flex:1; }
 
@@ -278,20 +274,24 @@ require_once dirname(__DIR__) . '/include/ai_chat.php';
 
 /* Fixed columns for the proxy table. With auto layout each figure column sized itself to its own
    widest cell, so the three of them were three different widths and every column shifted whenever
-   the numbers changed. Declared once here and the host column takes whatever is left. */
+   the numbers changed. Declared once here and the host column takes whatever is left.
-.vv-au-tbl.fixed { table-layout:fixed;min-width:960px; }
+
-/* The scroll container must never be able to widen what contains it. A flex or grid item defaults
+   Percentages, not pixels, and no minimum width. A pixel minimum makes the table wider than the
-   to min-width:auto, which means "never shrink below your content" — and the min-width above makes
+   page on a narrow window, and a table that cannot fit is a table that pushes its container around
-   that content 960px wide, so without these three the table pushes its whole column out to 960 and
+   — which is a layout problem everywhere else on the page in exchange for alignment in one card.
-   into whatever sits beside or below it, instead of scrolling inside the card. The overflow is the
+   Proportions give the same thing the fixed widths gave: three figure columns identical to each
-   whole point: the table is allowed to be wider than the page, the page is not allowed to notice. */
+   other and steady from row to row, at any width. */
-.vv-au-tblwrap   { overflow-x:auto;max-width:100%;min-width:0; }
+.vv-au-tbl.fixed { table-layout:fixed; }
-.vv-au-c-flags   { width:154px; }
+/* With fixed layout a cell keeps its width and its content simply overhangs, so anything that
-/* 60 spark bars at 2px plus 1px gaps is 179px, and the cell has 10px padding either side. Every
+   cannot shrink has to be clipped here rather than allowed to run into the next column. The strip
-   figure column gets that same width whether or not it draws bars. */
+   below is the case that matters: sixty bars at a fixed 3px each do not care how narrow the window
-.vv-au-c-stat    { width:200px; }
+   is. Losing the oldest few minutes off the left of it is a fair price for a table that never
-.vv-au-c-tog     { width:56px; }
+   deforms — the percentage beside it is the precise figure anyway. */
-.vv-au-c-act     { width:64px; }
+.vv-au-tbl.fixed td { overflow:hidden; }
+.vv-au-c-flags   { width:14%; }
+.vv-au-c-stat    { width:17%; }
+.vv-au-c-tog     { width:5%; }
+.vv-au-c-act     { width:6%; }
 
 /* ── Why ─────────────────────────────────────────────────────────────────── */
 /* On the figure's own line, not under the strip: the strip is 179px of fixed-width bars and is what
@@ -445,8 +445,7 @@ $tabs    = ['proxies' => 'Proxies', 'users' => 'Users & Groups',
   </div>
   <div class="vv-au-card">
     <div class="vv-au-loading" id="vv-au-proxy-loading">Loading…</div>
-    <div class="vv-au-tblwrap" id="vv-au-proxy-wrap" style="display:none">
+    <table class="vv-au-tbl fixed" id="vv-au-proxy-tbl" style="display:none">
-    <table class="vv-au-tbl fixed" id="vv-au-proxy-tbl">
       <colgroup>
         <col><col class="vv-au-c-flags"><col class="vv-au-c-stat"><col class="vv-au-c-stat">
         <col class="vv-au-c-stat"><col class="vv-au-c-tog"><col class="vv-au-c-act">
@@ -456,7 +455,6 @@ $tabs    = ['proxies' => 'Proxies', 'users' => 'Users &amp; Groups',
       </tr></thead>
       <tbody id="vv-au-proxy-body"></tbody>
     </table>
-    </div>
     <div class="vv-au-empty" id="vv-au-proxy-empty" style="display:none">No proxy hosts configured.</div>
   </div>
 </div>
@@ -753,7 +751,7 @@ function _loadTab(tab) {
 // ── Proxies ───────────────────────────────────────────────────────────────────
 function _loadProxies() {
   const loading = document.getElementById('vv-au-proxy-loading');
-  const tbl     = document.getElementById('vv-au-proxy-wrap');
+  const tbl     = document.getElementById('vv-au-proxy-tbl');
   const empty   = document.getElementById('vv-au-proxy-empty');
   loading.style.display = 'block';
   tbl.style.display = 'none';
@@ -765,7 +763,7 @@ function _loadProxies() {
     if (!certsLoaded || !proxiesLoaded) return;
     loading.style.display = 'none';
     if (!_proxies.length) { empty.style.display = 'block'; return; }
-    tbl.style.display = 'block';
+    tbl.style.display = 'table';
     _renderProxies();
   }