Stop Unraid's span.warn stretching the watchdog and queue badges across their row

This commit is contained in:
Gmer4Lfe
2026-08-16 11:55:25 -04:00
parent f2ad41e8e2
commit 73358e6bae
2 changed files with 11 additions and 0 deletions
+4
View File
@@ -56,6 +56,10 @@ require_once dirname(__DIR__) . '/include/ai_chat.php';
/* ── Queue badges ────────────────────────────────────────── */
.vv-arr-q { display:flex;gap:6px;align-items:center;flex-wrap:wrap; }
.vv-arr-qbadge{ font-size:10px;padding:1px 7px;border-radius:3px;font-weight:600; }
/* See the same note in watchdog.php: Unraid's `span.warn` blockifies any span carrying that class
and stretches it to the full width of its container, and the queue badge takes `warn` as one of
its states. Ties on specificity, wins on order. */
span.vv-arr-qbadge { display:inline-block; width:auto; }
.vv-arr-qbadge.dl { background:#0a1a2a;color:#4a9eff;border:1px solid #1a3a5a; }
.vv-arr-qbadge.warn { background:#1f1500;color:#ffb74d;border:1px solid #3a2800; }
.vv-arr-qbadge.err { background:#200d0d;color:#ef5350;border:1px solid #3a1a1a; }
+7
View File
@@ -57,6 +57,13 @@ require_once dirname(__DIR__) . '/include/watchdog.php';
.vv-wd-val { font-size:12px;color:#bbb;text-align:right; }
.vv-wd-sep { border:none;border-top:1px solid #1e1e1e;margin:6px 0; }
.vv-wd-pill { font-size:10px;padding:1px 6px;border-radius:2px;background:#1e1e1e;color:#666;border:1px solid #272727; }
/* Unraid's default-base.css carries `span.warn { background:var(--yellow-200); display:block;
width:100% }`. The state modifier here is built at runtime as `vv-wd-pill ${cls}`, so a pill in
the warn state matched it: `.vv-wd-pill.warn` outranks it on background and colour but declares
no display or width, and the pill then filled its whole flex row and pushed the others onto the
next line. Element-qualified, so this ties on specificity and wins on order — the page's style
block is parsed after the theme's. */
span.vv-wd-pill { display:inline-block; width:auto; }
.vv-wd-pill.ok { background:#0d1f0d;color:#4caf50;border-color:#1a3a1a; }
.vv-wd-pill.warn { background:#1f1500;color:#ffb74d;border-color:#3a2800; }
.vv-wd-pill.err { background:#200d0d;color:#ef5350;border-color:#3a1a1a; }