fixed edge cases in selected album scrollTo logic

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

@@ -39,24 +39,9 @@ export class AlbumDropdown extends LitElement {
     @property({ attribute: false })
     tracks: library.Track[] = [];
 
-    @property({ type: Boolean, attribute: 'loading-tracks' })
-    loadingTracks = false;
-
     @property({ attribute: false })
     selectedTracks: Set<string> = new Set();
 
-    /** Number of phantom grid rows allocated by the parent. */
-    @property({ type: Number, attribute: 'phantom-rows' })
-    phantomRows = 1;
-
-    /** Grid item height in pixels (passed from parent). */
-    @property({ type: Number })
-    gridItemHeight = 230;
-
-    /** Grid gap in pixels (passed from parent). */
-    @property({ type: Number })
-    gridGap = 16;
-
     /** Width of the grid container in pixels (passed from parent). */
     @property({ type: Number })
     containerWidth = 800;
@@ -74,15 +59,6 @@ export class AlbumDropdown extends LitElement {
             box-sizing: border-box;
         }
 
-        .dropdown-loading {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            height: 206px;
-            color: #b3b3b3;
-            font-size: 13px;
-        }
-
         .dropdown-tracks {
             column-fill: auto;
             column-gap: 24px;
@@ -193,29 +169,23 @@ export class AlbumDropdown extends LitElement {
         return currentTrack.filePath === track.FilePath;
     }
 
-    /**
+    /** Height of each track row: 16px line-height + 4+4px padding. */
-     * Total height of the outer .album-dropdown box,
+    private static readonly TRACK_ROW_HEIGHT = 24;
-     * matching the phantom grid space exactly.
-     */
-    private get dropdownHeight(): number {
-        return (
-            this.phantomRows * this.gridItemHeight +
-            (this.phantomRows - 1) * this.gridGap
-        );
-    }
 
     /**
      * Height of the inner .dropdown-tracks container.
-     * Uses the full inner space so that column-fill:auto
+     * Sized so that column-fill:auto fills each column
-     * fills each column completely before moving to the
+     * completely before moving to the next.
-     * next.
-     *
-     * Dropdown chrome: 12+12 padding + 2+2 border = 28px.
      */
     private get tracksHeight(): number {
-        const chrome = 28;
+        const cols = this.columnCount;
+        const rowsPerCol = Math.ceil(
+            this.tracks.length / cols,
+        );
 
-        return this.dropdownHeight - chrome;
+        return (
+            rowsPerCol * AlbumDropdown.TRACK_ROW_HEIGHT
+        );
     }
 
     /* ================================================================
@@ -348,21 +318,8 @@ export class AlbumDropdown extends LitElement {
     }
 
     override render() {
-        if (this.loadingTracks) {
-            return html`
-                <div class="album-dropdown">
-                    <div class="dropdown-loading">
-                        Loading tracks...
-                    </div>
-                </div>
-            `;
-        }
-
         return html`
-            <div
+            <div class="album-dropdown">
-                class="album-dropdown"
-                style="height:${this.dropdownHeight}px"
-            >
                 <div
                     class="dropdown-tracks"
                     style="height:${this.tracksHeight}px;column-count:${this.columnCount}"