From 93679761afd43e485919d49e7c0a9d5612c42469 Mon Sep 17 00:00:00 2001
From: Caleb Allen <caleballen1276@gmail.com>
Date: Tue, 17 Feb 2026 11:02:26 -0500
Subject: [PATCH] fixed some colors and a small rendering bug in track-list

---
 .../components/cover-grid/album-dropdown.ts   |  5 ++--
 .../src/components/track-list/track-list.ts   | 23 +++++++++----------
 2 files changed, 13 insertions(+), 15 deletions(-)

diff --git a/frontend/src/components/cover-grid/album-dropdown.ts b/frontend/src/components/cover-grid/album-dropdown.ts
index 864328c..3e3280c 100644
--- a/frontend/src/components/cover-grid/album-dropdown.ts
+++ b/frontend/src/components/cover-grid/album-dropdown.ts
@@ -52,9 +52,8 @@ export class AlbumDropdown extends LitElement {
         }
 
         .album-dropdown {
-            background-color: #1a1a2e;
-            border-top: 2px solid #ffd43b;
-            border-bottom: 2px solid #ffd43b;
+            background-color: #212529;
+            border: 2px solid #ffd43b;
             border-radius: 4px;
             padding: 12px 16px;
             box-sizing: border-box;
diff --git a/frontend/src/components/track-list/track-list.ts b/frontend/src/components/track-list/track-list.ts
index 519c20d..03ffa1e 100644
--- a/frontend/src/components/track-list/track-list.ts
+++ b/frontend/src/components/track-list/track-list.ts
@@ -208,6 +208,7 @@ export class TrackList extends LitElement {
 
     .header-row {
       display: grid;
+      grid-template-columns: var(--grid-cols, 1fr 1fr 80px);
       padding: 8px;
       font-weight: bold;
       color: #fff;
@@ -260,6 +261,7 @@ export class TrackList extends LitElement {
 
     .track-row {
       display: grid;
+      grid-template-columns: var(--grid-cols, 1fr 1fr 80px);
       font-size: 12px;
       padding: 8px;
       border-bottom: 1px solid #333;
@@ -390,10 +392,14 @@ export class TrackList extends LitElement {
     }
 
     override updated(changed: Map<string, unknown>) {
-        if (
-            changed.has('columnWidths') ||
-            changed.has('selectedTracks')
-        ) {
+        if (changed.has('columnWidths')) {
+            this.style.setProperty(
+                '--grid-cols',
+                this.gridTemplateColumns,
+            );
+        }
+
+        if (changed.has('selectedTracks')) {
             this.virtualizer?.requestUpdate();
         }
 
@@ -700,13 +706,9 @@ export class TrackList extends LitElement {
             .filter(Boolean)
             .join(' ');
 
-        const colStyle =
-            `grid-template-columns: ${this.gridTemplateColumns}`;
-
         return html`
       <div
         class=${classes}
-        style=${colStyle}
         @click=${(e: MouseEvent) =>
                 this.onTrackRowClick(e, track, index)}
         @dblclick=${() => this.onTrackRowDblClick(track)}
@@ -727,10 +729,7 @@ export class TrackList extends LitElement {
       ${this.tracks.length === 0
                 ? html`<p>Loading tracks...</p>`
                 : html`
-            <div
-              class="header-row"
-              style="grid-template-columns: ${this.gridTemplateColumns}"
-            >
+            <div class="header-row">
               <div class="header-cell">Track Name</div>
               <div class="header-cell">Artist</div>
               <div class="header-cell">Track Length</div>