diff --git a/Plugin/unraid/pages/auth.php b/Plugin/unraid/pages/auth.php index 6552619..87fd4b1 100644 --- a/Plugin/unraid/pages/auth.php +++ b/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 - 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; } +.vv-au-panel.active { display:block; } /* ── 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. */ -.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 - to min-width:auto, which means "never shrink below your content" — and the min-width above makes - that content 960px wide, so without these three the table pushes its whole column out to 960 and - into whatever sits beside or below it, instead of scrolling inside the card. The overflow is the - whole point: the table is allowed to be wider than the page, the page is not allowed to notice. */ -.vv-au-tblwrap { overflow-x:auto;max-width:100%;min-width:0; } -.vv-au-c-flags { width:154px; } -/* 60 spark bars at 2px plus 1px gaps is 179px, and the cell has 10px padding either side. Every - figure column gets that same width whether or not it draws bars. */ -.vv-au-c-stat { width:200px; } -.vv-au-c-tog { width:56px; } -.vv-au-c-act { width:64px; } + the numbers changed. Declared once here and the host column takes whatever is left. + + Percentages, not pixels, and no minimum width. A pixel minimum makes the table wider than the + page on a narrow window, and a table that cannot fit is a table that pushes its container around + — which is a layout problem everywhere else on the page in exchange for alignment in one card. + Proportions give the same thing the fixed widths gave: three figure columns identical to each + other and steady from row to row, at any width. */ +.vv-au-tbl.fixed { table-layout:fixed; } +/* With fixed layout a cell keeps its width and its content simply overhangs, so anything that + cannot shrink has to be clipped here rather than allowed to run into the next column. The strip + below is the case that matters: sixty bars at a fixed 3px each do not care how narrow the window + is. Losing the oldest few minutes off the left of it is a fair price for a table that never + deforms — the percentage beside it is the precise figure anyway. */ +.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',
Loading…
-
@@ -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(); }