fixed some colors and a small rendering bug in track-list

frontend/src/components/cover-grid/album-dropdown.ts

@@ -52,9 +52,8 @@ export class AlbumDropdown extends LitElement {
         }
 
         .album-dropdown {
-            background-color: #1a1a2e;
+            background-color: #212529;
-            border-top: 2px solid #ffd43b;
+            border: 2px solid #ffd43b;
-            border-bottom: 2px solid #ffd43b;
             border-radius: 4px;
             padding: 12px 16px;
             box-sizing: border-box;

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 (
+        if (changed.has('columnWidths')) {
-            changed.has('columnWidths') ||
+            this.style.setProperty(
-            changed.has('selectedTracks')
+                '--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
+            <div class="header-row">
-              class="header-row"
-              style="grid-template-columns: ${this.gridTemplateColumns}"
-            >
               <div class="header-cell">Track Name</div>
               <div class="header-cell">Artist</div>
               <div class="header-cell">Track Length</div>