FailedProxy/Varaverk
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Gmer4Lfe
2026-08-16 02:14:38 -04:00
parent bd30c4e05a
commit ea2d3cf597
1 changed files with 23 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Plugin/unraid/pages/auth.php
+23 -25
View File
@@ -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',
</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">
<table class="vv-au-tbl fixed" id="vv-au-proxy-tbl" style="display:none">
<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();
}