Namespace the proxy table's fixed-layout class so Unraid Connect's Tailwind layer cannot claim it
This commit is contained in:
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user