From b3473aa37ecb3e7d3d17439f2022652e88f0a15e Mon Sep 17 00:00:00 2001
From: daniel-c-harvey <the.real.daniel.harvey@gmail.com>
Date: Fri, 5 Jun 2026 16:58:07 -0400
Subject: [PATCH] refactor(css): consolidate track-view layout and card text
 color rules; switch genre chip to Outlined variant

---
 DeepDrftPublic.Client/Pages/TracksView.razor  |  2 +-
 .../Pages/TracksView.razor.css                | 18 +++++---------
 .../wwwroot/styles/deepdrft-styles.css        | 24 ++++++++++++-------
 .../Components/TrackCard.razor                |  2 +-
 .../Components/TracksGallery.razor.css        |  2 --
 5 files changed, 23 insertions(+), 25 deletions(-)

diff --git a/DeepDrftPublic.Client/Pages/TracksView.razor b/DeepDrftPublic.Client/Pages/TracksView.razor
index 3ee2c8f..22b16a0 100644
--- a/DeepDrftPublic.Client/Pages/TracksView.razor
+++ b/DeepDrftPublic.Client/Pages/TracksView.razor
@@ -2,7 +2,7 @@
 
 <PageTitle>DeepDrft Track Gallery</PageTitle>
 
-<div class="tracks-page-wrapper">
+<div>
     <div class="tracks-view-container">
         @if (ViewModel.Page != null)
         {
diff --git a/DeepDrftPublic.Client/Pages/TracksView.razor.css b/DeepDrftPublic.Client/Pages/TracksView.razor.css
index 5215343..4134c43 100644
--- a/DeepDrftPublic.Client/Pages/TracksView.razor.css
+++ b/DeepDrftPublic.Client/Pages/TracksView.razor.css
@@ -1,26 +1,20 @@
-.tracks-page-wrapper {
-    display: flex;
-    flex-direction: column;
-}
+/* Layout for the tracks page.
+   Dead flex/height rules removed — the sticky-footer intent they encoded required
+   a height target that was never set; normal block flow is sufficient for a
+   paginated gallery. Horizontal inset is owned by MudContainer in TracksGallery. */
 
 .tracks-view-container {
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-    padding: 0 16px; /* Horizontal padding only */
+    padding: 0;
 }
 
 .tracks-content {
-    display: flex;
-    flex-grow: 1;
     padding-top: 16px;
 }
 
 .tracks-footer {
-    flex: 0 0;
     padding: 8px 0;
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 16px;
-}
\ No newline at end of file
+}
diff --git a/DeepDrftPublic/wwwroot/styles/deepdrft-styles.css b/DeepDrftPublic/wwwroot/styles/deepdrft-styles.css
index b80d85f..d980e33 100644
--- a/DeepDrftPublic/wwwroot/styles/deepdrft-styles.css
+++ b/DeepDrftPublic/wwwroot/styles/deepdrft-styles.css
@@ -211,8 +211,8 @@ body, p, span, div,
    8. TRACK CARDS
    ============================================================================= */
 
-/* Container — transparent so no background competes
-   with the absolute-positioned fallback panel or album art. */
+/* Container — transparent so the absolute-positioned fallback panel or album art
+   controls the card's background. No MudBlazor surface component background to fight. */
 .deepdrft-track-card-container {
     width: 250px;
     height: 250px;
@@ -281,14 +281,20 @@ body, p, span, div,
     border: 1px solid var(--deepdrft-border);
 }
 
-/* Card text — unconditional dark defaults (glass-language colors).
-   These fire even if the theme wrapper class is absent during WASM hydration,
-   preventing a "blue text" flash. Light-mode overrides below correct legibility. */
-.deepdrft-track-title  { color: var(--deepdrft-white, #FAFAF8); }
-.deepdrft-track-artist { color: var(--deepdrft-green-accent, #3D7A68); }
-.deepdrft-track-meta   { color: rgba(250, 250, 248, 0.55); }
+/* Card text — theme-neutral base for the WASM hydration window (no wrapper class yet).
+   Inherits body text so no jarring flash in either theme direction. */
+.deepdrft-track-title,
+.deepdrft-track-artist,
+.deepdrft-track-meta  { color: inherit; }
 
-/* Light-mode text overrides — legible on the near-white light fallback */
+/* Dark theme text — wins on specificity (0,2,0), not load order.
+   Title: off-white. Artist: muted off-white (hierarchy above meta, below title).
+   Meta: more muted. Green is reserved for the FAB (action) and chip border (tag only). */
+.deepdrft-theme-dark .deepdrft-track-title  { color: var(--deepdrft-white, #FAFAF8); }
+.deepdrft-theme-dark .deepdrft-track-artist { color: rgba(250, 250, 248, 0.65); }
+.deepdrft-theme-dark .deepdrft-track-meta   { color: rgba(250, 250, 248, 0.45); }
+
+/* Light theme text — wins on specificity (0,2,0) */
 .deepdrft-theme-light .deepdrft-track-title  { color: var(--deepdrft-navy, #0D1B2A); }
 .deepdrft-theme-light .deepdrft-track-artist { color: var(--deepdrft-green, #1A3C34); }
 .deepdrft-theme-light .deepdrft-track-meta   { color: var(--deepdrft-muted, #8A9BB0); }
diff --git a/DeepDrftShared.Client/Components/TrackCard.razor b/DeepDrftShared.Client/Components/TrackCard.razor
index dcb5886..1c71843 100644
--- a/DeepDrftShared.Client/Components/TrackCard.razor
+++ b/DeepDrftShared.Client/Components/TrackCard.razor
@@ -37,7 +37,7 @@
             {
                 <MudChip T="string"
                          Size="Size.Small"
-                         Variant="Variant.Filled"
+                         Variant="Variant.Outlined"
                          Color="Color.Primary"
                          Class="deepdrft-genre-chip">
                     @TrackModel.Genre
diff --git a/DeepDrftShared.Client/Components/TracksGallery.razor.css b/DeepDrftShared.Client/Components/TracksGallery.razor.css
index 2e29688..05d59fc 100644
--- a/DeepDrftShared.Client/Components/TracksGallery.razor.css
+++ b/DeepDrftShared.Client/Components/TracksGallery.razor.css
@@ -1,5 +1,3 @@
 .tracks-gallery-container {
-    padding: 16px;
-    height: 100%;
     box-sizing: border-box;
 }