From b58d7b4dade25ece74feb001d55dc18042ab23e4 Mon Sep 17 00:00:00 2001 From: BoulderBadgeDad Date: Sat, 6 Jun 2026 18:35:45 -0700 Subject: [PATCH] Fix the track-row pills: s must stay table-cells MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The lock-in pass caught it before it shipped anywhere: the pill styling set display:inline-flex on the status cells — which are s — knocking them out of table-cell layout and corrupting the row grid. The pill is now a centered pseudo-element painted BEHIND the text (z-index -1 inside the cell's own stacking context), so the cell's box model is untouched. State colors stay as CSS vars on the td and cascade into the pseudo. Also covers the secondary live-progress writer discovered in the same pass: it stamps legacy download-downloading / download-complete classes instead of data-state — both vocabularies now get the same pills (accent + breathe while downloading, green when complete). --- webui/static/style.css | 90 ++++++++++++++++++++++++------------------ 1 file changed, 51 insertions(+), 39 deletions(-) diff --git a/webui/static/style.css b/webui/static/style.css index fab8bd65..85072d48 100644 --- a/webui/static/style.css +++ b/webui/static/style.css @@ -66325,32 +66325,58 @@ body.em-scroll-lock { overflow: hidden; } } /* ── Modal revamp: live track-row states (animation == gauge, in the table) ── - The download-status cell carries data-state (set by the renderer); the row - carries .row-working while a track is actively searching/downloading/ - processing. Badges are state-colored pills; only ACTIVE states breathe. */ + The download-status cell carries data-state (set by the main renderer; a + secondary live-progress writer uses the legacy download-downloading / + download-complete classes — both vocabularies are styled). The row carries + .row-working while a track is actively searching/downloading/processing. -.track-download-status[data-state] { - display: inline-flex; - align-items: center; - padding: 3px 11px; - border-radius: 999px; + LAYOUT NOTE: these are s — they must stay display:table-cell, so the + pill is a centered pseudo-element painted BEHIND the text, not a box model + change on the cell itself. State colors are CSS vars on the td; the pseudo + reads them. */ + +.track-download-status[data-state], +.track-download-status.download-downloading, +.track-download-status.download-complete, +.track-match-status { + position: relative; + z-index: 0; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; - border: 1px solid var(--row-state-border, rgba(255, 255, 255, 0.1)); - background: var(--row-state-bg, rgba(255, 255, 255, 0.04)); color: var(--row-state-fg, rgba(255, 255, 255, 0.65)); - white-space: nowrap; +} + +.track-download-status[data-state]::before, +.track-download-status.download-downloading::before, +.track-download-status.download-complete::before, +.track-match-status.match-found::before, +.track-match-status.match-missing::before, +.track-match-status.match-checking::before { + content: ''; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: calc(100% - 18px); + height: 26px; + border-radius: 999px; + background: var(--row-state-bg, rgba(255, 255, 255, 0.04)); + border: 1px solid var(--row-state-border, rgba(255, 255, 255, 0.1)); + z-index: -1; + pointer-events: none; } .track-download-status[data-state="pending"], .track-download-status[data-state="cancelled"], -.track-download-status[data-state="cancelling"] { +.track-download-status[data-state="cancelling"], +.track-download-status[data-state="not_found"] { --row-state-fg: rgba(255, 255, 255, 0.5); } .track-download-status[data-state="searching"], -.track-download-status[data-state="downloading"] { +.track-download-status[data-state="downloading"], +.track-download-status.download-downloading { --row-state-border: rgba(var(--accent-rgb), 0.4); --row-state-bg: rgba(var(--accent-rgb), 0.12); --row-state-fg: rgb(var(--accent-light-rgb)); @@ -66362,7 +66388,8 @@ body.em-scroll-lock { overflow: hidden; } --row-state-fg: #fbbf24; } -.track-download-status[data-state="completed"] { +.track-download-status[data-state="completed"], +.track-download-status.download-complete { --row-state-border: rgba(74, 222, 128, 0.35); --row-state-bg: rgba(74, 222, 128, 0.1); --row-state-fg: #4ade80; @@ -66380,15 +66407,12 @@ body.em-scroll-lock { overflow: hidden; } --row-state-fg: #fb923c; } -.track-download-status[data-state="not_found"] { - --row-state-fg: rgba(255, 255, 255, 0.4); -} - /* Only states that are actually WORKING breathe */ .track-download-status[data-state="searching"], .track-download-status[data-state="downloading"], .track-download-status[data-state="post_processing"], -.track-download-status[data-state="cancelling"] { +.track-download-status[data-state="cancelling"], +.track-download-status.download-downloading { animation: row-state-breathe 1.8s ease-in-out infinite; } @@ -66397,33 +66421,21 @@ body.em-scroll-lock { overflow: hidden; } 50% { opacity: 0.55; } } -/* Match-status cells get the same pill language (classes already existed) */ -.track-match-status { - display: inline-flex; - align-items: center; - padding: 3px 11px; - border-radius: 999px; - font-size: 11px; - font-weight: 600; - white-space: nowrap; -} - +/* Match-status colors feed the same pill (classes already existed) */ .track-match-status.match-found { - border: 1px solid rgba(74, 222, 128, 0.35); - background: rgba(74, 222, 128, 0.1); - color: #4ade80; + --row-state-border: rgba(74, 222, 128, 0.35); + --row-state-bg: rgba(74, 222, 128, 0.1); + --row-state-fg: #4ade80; } .track-match-status.match-missing { - border: 1px solid rgba(251, 191, 36, 0.35); - background: rgba(251, 191, 36, 0.1); - color: #fbbf24; + --row-state-border: rgba(251, 191, 36, 0.35); + --row-state-bg: rgba(251, 191, 36, 0.1); + --row-state-fg: #fbbf24; } .track-match-status.match-checking { - border: 1px solid rgba(255, 255, 255, 0.1); - background: rgba(255, 255, 255, 0.04); - color: rgba(255, 255, 255, 0.5); + --row-state-fg: rgba(255, 255, 255, 0.5); } /* The actively-working row carries a persistent accent presence — like the