From d2a730a6aa0d73f4389d0949b6aeae52d733fe04 Mon Sep 17 00:00:00 2001 From: BoulderBadgeDad Date: Thu, 28 May 2026 22:38:55 -0700 Subject: [PATCH 1/9] UI consistency (page shell 1/2): extract shared .page-shell primitive First step of the page-layout-shell standardization (kettui's UI-consistency point #1). The dashboard, tools, watchlist and wishlist pages each defined a byte-identical "card" container (padding 28px 24px 30px, margin 20px, gradient bg, radius 24px, border + border-top, layered shadow) under four different class names. Extract that into a single `.page-shell` primitive (modeled on the canonical dashboard/stats look) and have the four pages adopt it. Each keeps its bespoke class for page-specific extras and as a JS/mobile hook: - dashboard-container: keeps display:flex / column / gap:25px - watchlist/wishlist-page-container: keep position:relative - tools-page-container: no extras (box now fully from .page-shell) Zero visual change: computed styles are identical (declarations relocated, not altered), and mobile.css overrides still target the retained bespoke classes. Per-page themed headers (watchlist amber, etc.) are intentionally NOT touched. The class name is intended for reuse by the React pages too, so the primitive is shared across both stacks. Next (wave 2): migrate settings / automations / playlist-explorer / library onto .page-shell, which snaps their slightly-off spacing to canonical. --- webui/index.html | 8 +++--- webui/static/style.css | 63 ++++++++++++------------------------------ 2 files changed, 21 insertions(+), 50 deletions(-) diff --git a/webui/index.html b/webui/index.html index c01545e8..d067db76 100644 --- a/webui/index.html +++ b/webui/index.html @@ -311,7 +311,7 @@
-
+

System Dashboard

@@ -6322,7 +6322,7 @@ TOOLS PAGE ═══════════════════════════════════════════════════════════════════ -->
-
+

@@ -6779,7 +6779,7 @@ WATCHLIST PAGE ═══════════════════════════════════════════════════════════════════ -->
-
+
@@ -6895,7 +6895,7 @@ WISHLIST PAGE ═══════════════════════════════════════════════════════════════════ -->
-
+
diff --git a/webui/static/style.css b/webui/static/style.css index 7c2aa9d2..a5fedaaf 100644 --- a/webui/static/style.css +++ b/webui/static/style.css @@ -7990,13 +7990,13 @@ body.helper-mode-active #dashboard-activity-feed:hover { /* ======================================================= */ /* Main Dashboard Layout */ -.dashboard-container { - display: flex; - flex-direction: column; - gap: 25px; - /* Spacing between sections */ - padding: 28px 24px 30px 24px; - +/* ── Shared page shell ────────────────────────────────────────────── + The canonical page card (the dashboard / stats look). Adopted by the + dashboard, tools, watchlist and wishlist pages — and intended for reuse + by the React pages too (same class name). Page-specific extras (flex + layout, position) stay on the per-page class. */ +.page-shell { + padding: 28px 24px 30px; /* Semi-transparent to let page particles show through */ background: linear-gradient(135deg, rgba(20, 20, 20, 0.55) 0%, @@ -8005,7 +8005,6 @@ body.helper-mode-active #dashboard-activity-feed:hover { border: 1px solid rgba(255, 255, 255, 0.08); border-top: 1px solid rgba(255, 255, 255, 0.12); margin: 20px; - /* Soft floating shadow */ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), @@ -8013,6 +8012,13 @@ body.helper-mode-active #dashboard-activity-feed:hover { inset 0 1px 0 rgba(255, 255, 255, 0.08); } +.dashboard-container { + display: flex; + flex-direction: column; + gap: 25px; + /* Spacing between sections; card styling comes from .page-shell */ +} + .dashboard-section { display: flex; flex-direction: column; @@ -59446,20 +59452,7 @@ body.reduce-effects *::after { TOOLS PAGE ═══════════════════════════════════════════════════════════════════ */ -.tools-page-container { - padding: 28px 24px 30px; - margin: 20px; - background: linear-gradient(135deg, - rgba(20, 20, 20, 0.55) 0%, - rgba(12, 12, 12, 0.62) 100%); - border-radius: 24px; - border: 1px solid rgba(255, 255, 255, 0.08); - border-top: 1px solid rgba(255, 255, 255, 0.12); - box-shadow: - 0 8px 32px rgba(0, 0, 0, 0.3), - 0 4px 16px rgba(0, 0, 0, 0.2), - inset 0 1px 0 rgba(255, 255, 255, 0.08); -} +/* .tools-page-container: card styling now from .page-shell (no extras). */ .tools-page-header { padding: 20px 24px 18px; @@ -59632,18 +59625,7 @@ body.reduce-effects *::after { ═══════════════════════════════════════════════════════════════════ */ .watchlist-page-container { - padding: 28px 24px 30px; - margin: 20px; - background: linear-gradient(135deg, - rgba(20, 20, 20, 0.55) 0%, - rgba(12, 12, 12, 0.62) 100%); - border-radius: 24px; - border: 1px solid rgba(255, 255, 255, 0.08); - border-top: 1px solid rgba(255, 255, 255, 0.12); - box-shadow: - 0 8px 32px rgba(0, 0, 0, 0.3), - 0 4px 16px rgba(0, 0, 0, 0.2), - inset 0 1px 0 rgba(255, 255, 255, 0.08); + /* card styling from .page-shell; keep page-specific positioning */ position: relative; } @@ -60044,18 +60026,7 @@ body.reduce-effects *::after { ═══════════════════════════════════════════════════════════════════ */ .wishlist-page-container { - padding: 28px 24px 30px; - margin: 20px; - background: linear-gradient(135deg, - rgba(20, 20, 20, 0.55) 0%, - rgba(12, 12, 12, 0.62) 100%); - border-radius: 24px; - border: 1px solid rgba(255, 255, 255, 0.08); - border-top: 1px solid rgba(255, 255, 255, 0.12); - box-shadow: - 0 8px 32px rgba(0, 0, 0, 0.3), - 0 4px 16px rgba(0, 0, 0, 0.2), - inset 0 1px 0 rgba(255, 255, 255, 0.08); + /* card styling from .page-shell; keep page-specific positioning */ position: relative; } From def58a99076d354b6bcf6d5b535fde82c373e1a1 Mon Sep 17 00:00:00 2001 From: BoulderBadgeDad Date: Thu, 28 May 2026 22:54:31 -0700 Subject: [PATCH 2/9] UI consistency (page shell 2/N): automations adopts .page-shell card First of the "flat -> card" conversions. The automations list view sat directly on the page background (.automations-container = bare padding) while its inner .dashboard-header is the same header dashboard uses. Adopt .page-shell so the page becomes a floating gradient card structurally identical to the dashboard (page-shell card > dashboard-header > content). - Drop .automations-container's bespoke `padding: 20px 24px` (card padding now from .page-shell); keep the class as the mobile/JS hook. - Add `page-shell` to the container in markup. Visible change by design (this page was not previously a card). Mobile keeps its existing .automations-container padding override. --- webui/index.html | 2 +- webui/static/style.css | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/webui/index.html b/webui/index.html index d067db76..1f60ab60 100644 --- a/webui/index.html +++ b/webui/index.html @@ -2280,7 +2280,7 @@
-
+

Automations

diff --git a/webui/static/style.css b/webui/static/style.css index a5fedaaf..3846e676 100644 --- a/webui/static/style.css +++ b/webui/static/style.css @@ -43838,7 +43838,7 @@ body.downloads-disabled [onclick*="DownloadMissing"]:not([onclick*="close"]) { AUTOMATIONS PAGE =========================== */ -.automations-container { padding: 20px 24px; } +/* .automations-container: card styling from .page-shell */ .automations-list { display: flex; flex-direction: column; gap: 0; } #automations-list-view { padding-bottom: 10vh; } From 45bbc99d94b0728ddda9dd5c047d18c547c24c24 Mon Sep 17 00:00:00 2001 From: BoulderBadgeDad Date: Thu, 28 May 2026 22:57:09 -0700 Subject: [PATCH 3/9] UI consistency (page shell 3/N): playlist-explorer adopts .page-shell card MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Convert the playlist-explorer page from a flat padded container to the .page-shell floating card. Drop its bespoke `padding: 24px 32px`; keep the full-height flex layout (display:flex / column / min-height:100%) since the explorer fills the viewport. Visible change by design. Watch: the full-height min-height:100% inside a margin:20px card may run slightly tall — to be confirmed visually. --- webui/index.html | 2 +- webui/static/style.css | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/webui/index.html b/webui/index.html index 1f60ab60..d307039c 100644 --- a/webui/index.html +++ b/webui/index.html @@ -3632,7 +3632,7 @@
-
+
diff --git a/webui/static/style.css b/webui/static/style.css index 3846e676..276ca321 100644 --- a/webui/static/style.css +++ b/webui/static/style.css @@ -54451,7 +54451,7 @@ tr.tag-diff-same { ================================================================================== */ .explorer-container { - padding: 24px 32px; + /* card styling from .page-shell; keep full-height flex layout */ display: flex; flex-direction: column; min-height: 100%; From 44faf44fca4fba6161154ac3691e53ab8a0f0e64 Mon Sep 17 00:00:00 2001 From: BoulderBadgeDad Date: Thu, 28 May 2026 23:23:16 -0700 Subject: [PATCH 4/9] UI consistency (page shell 5/N): settings adopts .page-shell card MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Settings was the one flat page with no single wrapper — its .dashboard-header and .settings-content sat as siblings directly under .page. Wrap both in a single .page-shell div so the page becomes a floating card with the header banner at the top, matching the dashboard structure. HTML-only change (no CSS: .settings-content keeps its minor `0 4px` inner padding). Library is intentionally NOT converted — its full-height artist grid + A-Z jump rail overflow a margin:20px card, so it stays flat as a documented exception (same category as search/discover/active-downloads). --- webui/index.html | 2 ++ 1 file changed, 2 insertions(+) diff --git a/webui/index.html b/webui/index.html index d307039c..c5d5f2bd 100644 --- a/webui/index.html +++ b/webui/index.html @@ -3735,6 +3735,7 @@
+

Settings

@@ -6200,6 +6201,7 @@
+
From eebc58d3ff0e5ae2dbe7a49de274edeaf665cbd9 Mon Sep 17 00:00:00 2001 From: BoulderBadgeDad Date: Thu, 28 May 2026 23:40:10 -0700 Subject: [PATCH 5/9] UI consistency (buttons 1/N): add shared .btn primitive; migrate config-modal Start of the button-consolidation pass (kettui's #1). The app had ~236 button classes / ~8-10 distinct looks with heavy near-duplication. Introduce a canonical .btn design-system primitive (base + .btn--primary / .btn--secondary / .btn--danger), modeled on the dominant existing look (accent-gradient primary, translucent ghost, semantic danger) and built on the accent CSS vars. New markup and the React pages should use this; existing per-page button classes will migrate onto it family by family. First family migrated: the config/settings modal buttons (.config-modal-btn*, 4 static uses, no JS refs) -> .btn .btn--primary / .btn--secondary. Removed the now-dead .config-modal-btn* rules and re-scoped its mobile full-width override to `.config-modal-actions .btn`. Visible change is minor by design (padding 28->24px, gradient direction normalized). Proof step for sign-off on the .btn look before rolling wider. --- webui/index.html | 8 ++-- webui/static/style.css | 103 ++++++++++++++++++++++++----------------- 2 files changed, 64 insertions(+), 47 deletions(-) diff --git a/webui/index.html b/webui/index.html index c5d5f2bd..55be3e95 100644 --- a/webui/index.html +++ b/webui/index.html @@ -7467,11 +7467,11 @@
- -
@@ -7651,11 +7651,11 @@
- - diff --git a/webui/static/style.css b/webui/static/style.css index 276ca321..9560a68c 100644 --- a/webui/static/style.css +++ b/webui/static/style.css @@ -7990,6 +7990,64 @@ body.helper-mode-active #dashboard-activity-feed:hover { /* ======================================================= */ /* Main Dashboard Layout */ +/* ── Shared button primitive ──────────────────────────────────────── + The canonical button design system. New markup (and the React pages) + should use `.btn` + a modifier; existing per-page button classes are being + migrated onto it family by family. Values reflect the dominant existing + look (accent-gradient primary, translucent ghost, semantic danger/warning). + Filter "pills" / tab buttons are a separate primitive (see .tab below). */ +.btn { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 8px; + padding: 12px 24px; + border-radius: 12px; + font-size: 14px; + font-weight: 600; + font-family: inherit; + line-height: 1; + cursor: pointer; + border: none; + outline: none; + transition: all 0.2s ease; +} +.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; } + +.btn--primary { + background: linear-gradient(135deg, rgb(var(--accent-rgb)), rgb(var(--accent-light-rgb))); + color: #000; + font-weight: 700; + box-shadow: 0 4px 16px rgba(var(--accent-rgb), 0.3); +} +.btn--primary:hover:not(:disabled) { + transform: translateY(-1px); + box-shadow: 0 6px 20px rgba(var(--accent-rgb), 0.4); +} +.btn--primary:active:not(:disabled) { transform: translateY(0); } + +.btn--secondary { + background: rgba(255, 255, 255, 0.08); + color: #fff; + border: 1px solid rgba(255, 255, 255, 0.15); +} +.btn--secondary:hover:not(:disabled) { + background: rgba(255, 255, 255, 0.12); + border-color: rgba(255, 255, 255, 0.25); +} + +.btn--danger { + background: linear-gradient(135deg, #dc2626, #ef4444); + color: #fff; + font-weight: 700; + box-shadow: 0 4px 16px rgba(220, 38, 38, 0.3); +} +.btn--danger:hover:not(:disabled) { + transform: translateY(-1px); + box-shadow: 0 6px 20px rgba(220, 38, 38, 0.4); +} + + /* ── Shared page shell ────────────────────────────────────────────── The canonical page card (the dashboard / stats look). Adopted by the dashboard, tools, watchlist and wishlist pages — and intended for reuse @@ -20880,48 +20938,7 @@ body.helper-mode-active #dashboard-activity-feed:hover { justify-content: flex-end; } -.config-modal-btn { - padding: 12px 28px; - border-radius: 12px; - font-size: 15px; - font-weight: 600; - cursor: pointer; - transition: all 0.2s ease; - border: none; - outline: none; -} - -.config-modal-btn-primary { - background: linear-gradient(135deg, rgb(var(--accent-light-rgb)), rgb(var(--accent-rgb))); - color: #000; - box-shadow: 0 4px 16px rgba(var(--accent-rgb), 0.3); -} - -.config-modal-btn-primary:hover { - background: linear-gradient(135deg, #1fdf64, rgb(var(--accent-light-rgb))); - box-shadow: 0 6px 20px rgba(var(--accent-rgb), 0.4); - transform: translateY(-1px); -} - -.config-modal-btn-primary:active { - transform: translateY(0); -} - -.config-modal-btn-primary:disabled { - opacity: 0.5; - cursor: not-allowed; -} - -.config-modal-btn-secondary { - background: rgba(255, 255, 255, 0.08); - color: #ffffff; - border: 1px solid rgba(255, 255, 255, 0.15); -} - -.config-modal-btn-secondary:hover { - background: rgba(255, 255, 255, 0.12); - border-color: rgba(255, 255, 255, 0.25); -} +/* .config-modal-btn* migrated to the shared .btn / .btn--primary / .btn--secondary primitive. */ /* Linked Provider Artist */ /* Per-source linked rows */ @@ -21159,7 +21176,7 @@ body.helper-mode-active #dashboard-activity-feed:hover { flex-direction: column-reverse; } - .config-modal-btn { + .config-modal-actions .btn { width: 100%; } } From dd5fe844d479e394ca4aa5449bad9da60887afaf Mon Sep 17 00:00:00 2001 From: BoulderBadgeDad Date: Thu, 28 May 2026 23:48:23 -0700 Subject: [PATCH 6/9] UI consistency (buttons 2/N): wishlist modal buttons -> .btn Migrate the wishlist add-to-wishlist modal buttons onto the shared .btn primitive: primary -> .btn--primary, secondary -> .btn--secondary, the green download CTA -> new .btn--download modifier. Added a shared .btn.loading state (amber pulse, reusing the existing pulse-loading keyframe) since confirm-add-to-wishlist-btn toggles `loading` via JS (wishlist-tools.js). Removed the dead .wishlist-modal-btn* rules and re-scoped the mobile full-width override to `.wishlist-modal-actions .btn`. --- webui/index.html | 6 +-- webui/static/style.css | 96 ++++++++++-------------------------------- 2 files changed, 26 insertions(+), 76 deletions(-) diff --git a/webui/index.html b/webui/index.html index 55be3e95..bae77d96 100644 --- a/webui/index.html +++ b/webui/index.html @@ -7290,15 +7290,15 @@
- - -
diff --git a/webui/static/style.css b/webui/static/style.css index 9560a68c..8293d395 100644 --- a/webui/static/style.css +++ b/webui/static/style.css @@ -8047,6 +8047,26 @@ body.helper-mode-active #dashboard-activity-feed:hover { box-shadow: 0 6px 20px rgba(220, 38, 38, 0.4); } +/* Spotify-green download CTA (intentional brand color). */ +.btn--download { + background: linear-gradient(135deg, #1db954, #1ed760); + color: #fff; + border: 1px solid rgba(29, 185, 84, 0.3); +} +.btn--download:hover:not(:disabled) { + background: linear-gradient(135deg, #1ed760, #1db954); + transform: translateY(-1px); + box-shadow: 0 8px 24px rgba(29, 185, 84, 0.4); +} + +/* Shared loading state (JS toggles `.loading`). */ +.btn.loading { + background: rgba(255, 193, 7, 0.9); + color: #000; + animation: pulse-loading 1.5s infinite; + cursor: not-allowed; +} + /* ── Shared page shell ────────────────────────────────────────────── The canonical page card (the dashboard / stats look). Adopted by the @@ -28152,78 +28172,8 @@ div.artist-hero-badge { gap: 12px; } -.wishlist-modal-btn { - padding: 12px 24px; - border: none; - border-radius: 12px; - font-size: 14px; - font-weight: 600; - cursor: pointer; - transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); - min-width: 120px; -} - -.wishlist-modal-btn-secondary { - background: rgba(255, 255, 255, 0.1); - color: rgba(255, 255, 255, 0.8); - border: 1px solid rgba(255, 255, 255, 0.2); -} - -.wishlist-modal-btn-secondary:hover { - background: rgba(255, 255, 255, 0.2); - color: #ffffff; - border-color: rgba(255, 255, 255, 0.3); -} - -.wishlist-modal-btn-download { - background: linear-gradient(135deg, #1db954, #1ed760); - color: #ffffff; - border: 1px solid rgba(29, 185, 84, 0.3); -} - -.wishlist-modal-btn-download:hover { - background: linear-gradient(135deg, #1ed760, #1db954); - transform: translateY(-1px); - box-shadow: 0 8px 24px rgba(29, 185, 84, 0.4); -} - -.wishlist-modal-btn-download:active { - transform: translateY(0); - box-shadow: 0 4px 12px rgba(29, 185, 84, 0.3); -} - -.wishlist-modal-btn-primary { - background: linear-gradient(135deg, rgb(var(--accent-rgb)) 0%, rgb(var(--accent-light-rgb)) 100%); - color: #ffffff; - border: 1px solid rgba(var(--accent-rgb), 0.3); -} - -.wishlist-modal-btn-primary:hover { - background: linear-gradient(135deg, rgb(var(--accent-light-rgb)) 0%, #22e167 100%); - transform: translateY(-1px); - box-shadow: 0 8px 24px rgba(var(--accent-rgb), 0.4); -} - -.wishlist-modal-btn-primary:active { - transform: translateY(0); - box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.3); -} - -/* Loading State */ -.wishlist-modal-btn-primary.loading { - background: rgba(255, 193, 7, 0.9); - color: #000000; - animation: pulse-loading 1.5s infinite; - cursor: not-allowed; -} - -.wishlist-modal-btn-primary:disabled { - background: rgba(255, 255, 255, 0.1); - color: rgba(255, 255, 255, 0.4); - cursor: not-allowed; - transform: none; - box-shadow: none; -} +/* .wishlist-modal-btn* migrated to the shared .btn primitive + (.btn--primary / .btn--secondary / .btn--download / .btn.loading). */ /* Animation for modal appearance */ @keyframes wishlistModalFadeIn { @@ -28310,7 +28260,7 @@ div.artist-hero-badge { gap: 12px; } - .wishlist-modal-btn { + .wishlist-modal-actions .btn { width: 100%; } } From 079c169f8d882eb709e496c91e9814f452cbdb04 Mon Sep 17 00:00:00 2001 From: BoulderBadgeDad Date: Fri, 29 May 2026 08:28:18 -0700 Subject: [PATCH 7/9] UI consistency (tabs/cards): add .tab and .card primitives (no migration) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Add the canonical .tab (bordered rounded-pill filter tab) and .card ("glass" content card) primitives as the documented design-system standard for new markup and the React pages — modeled on the cleanest existing looks (watchlist filter pill; dashboard service/stat card). Deliberately NOT migrating the existing tab/card components onto them: the current implementations are visually divergent and JS-coupled (active-state toggled by class name, cards built in JS), so a blind consolidation risks subtle regressions. These primitives let new/React code be consistent now; the legacy components migrate when visually verifiable / in React. Unused classes -> zero visual change to the current UI. --- webui/static/style.css | 45 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 45 insertions(+) diff --git a/webui/static/style.css b/webui/static/style.css index 8293d395..0c397652 100644 --- a/webui/static/style.css +++ b/webui/static/style.css @@ -8068,6 +8068,51 @@ body.helper-mode-active #dashboard-activity-feed:hover { } +/* ── Shared tab / filter-pill primitive ───────────────────────────── + Canonical pill tab (the bordered rounded-pill filter look). New markup and + the React pages should use `.tab` + `.tab.active`. Existing per-page pill + classes (watchlist-filter-btn, discog-filter, adl-pill, …) are deliberately + left in place — they're JS-coupled and visually divergent, so they should be + migrated only when visually verifiable / in React, not blind. */ +.tab { + padding: 6px 16px; + border-radius: 20px; + border: 1px solid rgba(255, 255, 255, 0.1); + background: rgba(255, 255, 255, 0.05); + color: rgba(255, 255, 255, 0.5); + font-size: 13px; + font-weight: 600; + font-family: inherit; + cursor: pointer; + transition: all 0.2s ease; +} +.tab:hover:not(.active) { color: rgba(255, 255, 255, 0.8); } +.tab.active { + color: #fff; + border-color: rgba(var(--accent-rgb), 0.5); + background: rgba(var(--accent-rgb), 0.15); +} + +/* ── Shared card primitive ────────────────────────────────────────── + Canonical "glass" content card (the dashboard service/stat card look). New + markup and the React pages should use `.card`. Existing per-feature card + classes are left in place; migrate when visually verifiable / in React. */ +.card { + padding: 20px 22px; + border-radius: 16px; + border: 1px solid rgba(255, 255, 255, 0.06); + background: rgba(18, 18, 22, 0.9); + backdrop-filter: blur(12px); + box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15); + transition: all 0.2s ease; +} +.card:hover { + transform: translateY(-2px); + border-color: rgba(var(--accent-rgb), 0.3); + box-shadow: 0 8px 28px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15); +} + + /* ── Shared page shell ────────────────────────────────────────────── The canonical page card (the dashboard / stats look). Adopted by the dashboard, tools, watchlist and wishlist pages — and intended for reuse From f57fc640b271c3f30064d4871d099ae4048481a7 Mon Sep 17 00:00:00 2001 From: BoulderBadgeDad Date: Fri, 29 May 2026 08:41:38 -0700 Subject: [PATCH 8/9] UI consistency (page shell 6/N): sync page adopts .page-shell card MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Standardize the sync page's outer spacing to match the other pages. Like settings, its .sync-header and .sync-content-area were siblings directly under .page (no wrapper) — wrap both in a single .page-shell div so it becomes the floating card with consistent margin/padding. HTML-only change. Watch: .sync-content-area uses height:95% (grid) — fine against an auto-height card, but to be confirmed visually (library's full-height grid was the one that didn't fit a card). --- webui/index.html | 2 ++ 1 file changed, 2 insertions(+) diff --git a/webui/index.html b/webui/index.html index bae77d96..4388ffda 100644 --- a/webui/index.html +++ b/webui/index.html @@ -976,6 +976,7 @@
+
@@ -2059,6 +2060,7 @@
+
From 6129ea850859b99844076c850667ec15d1dc5e78 Mon Sep 17 00:00:00 2001 From: BoulderBadgeDad Date: Fri, 29 May 2026 08:53:03 -0700 Subject: [PATCH 9/9] UI consistency: normalize exception-page outer gutter to .page (40px) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Low-risk tidy-up for the full-bleed "exception" pages that aren't carded. Every page already gets a 40px gutter from .page, but the exception pages were piling on inconsistent extra padding (library +20px, active-downloads +28/32px, discover/docs +0) — giving accidental 60 / 68-72 / 40 effective gutters. Drop the redundant container padding on library and active-downloads so the single .page 40px gutter is the shared, intentional outer spacing across the full-width exception pages. discover (centered max-width) and docs (sidebar layout) keep their functional layout; library's mobile padding override is unaffected. --- webui/static/style.css | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/webui/static/style.css b/webui/static/style.css index 0c397652..2603908f 100644 --- a/webui/static/style.css +++ b/webui/static/style.css @@ -25765,10 +25765,11 @@ body.helper-mode-active #dashboard-activity-feed:hover { =============================== */ .library-container { + /* outer gutter comes from .page (40px) — shared across the full-width + exception pages so spacing is intentional, not accidental */ height: 100%; display: flex; flex-direction: column; - padding: 20px; gap: 20px; } @@ -58153,9 +58154,10 @@ body.reduce-effects *::after { } .adl-layout { + /* outer gutter comes from .page (40px) — consistent with the other + full-width exception pages (library, etc.) */ display: flex; gap: 0; - padding: 28px 32px; max-width: 1440px; }