Namespace the proxy table's fixed-layout class so Unraid Connect's Tailwind layer cannot claim it

This commit is contained in:
Gmer4Lfe
2026-08-16 11:27:59 -04:00
parent ea2d3cf597
commit 187dc188c2
+11 -4
View File
@@ -280,14 +280,21 @@ require_once dirname(__DIR__) . '/include/ai_chat.php';
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; }
other and steady from row to row, at any width.
The modifier is namespaced rather than called `fixed`. Unraid Connect mounts Vue components on
every WebGUI page and Vite injects their Tailwind layer into the document head, which carries
`.fixed{position:fixed}` — a bare `fixed` on this table took the whole thing out of flow, the
panel collapsed to its section bar and the Assistant card slid up underneath it. Nothing in the
plugin's own CSS can show that: the rule arrives from another plugin at runtime. Never give an
element in here a class name that is also a Tailwind utility. */
.vv-au-tbl.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-tbl.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%; }
@@ -445,7 +452,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>
<table class="vv-au-tbl fixed" id="vv-au-proxy-tbl" style="display:none">
<table class="vv-au-tbl 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">