fix(ui): spend a row's leftover space on the gaps, not the margins

The three card grids -- albums, artists, genres -- laid out with
`justify: 'center'` and a fixed 8px gap and padding, which gives the
row a fixed width and pushes everything left over to the two margins.
Measured on a 1440px window: cards 16px apart inside 78px of nothing
down each side. The outside was five times the inside.

`utils/grid-spacing.ts` computes one number instead, from what the row
could not spend on another card: the same value between two cards,
between two rows, and down each edge. That window now reads 30px
outside against 34px between, and it holds at any width.

The virtualizer has a word for this -- `justify: 'space-evenly'` with
`gap: 'auto'` -- and it cannot be used. It fits `floor(width /
cardWidth)` columns without reserving the gap it is about to need, so a
width one card short of exact leaves seven cards a pixel apart. On the
window above it would fit 7 columns with 1px between them. Deciding the
column count here is what puts a floor under the spacing.

Two consequences. The layout is rebuilt when the container width
changes the spacing rather than only when the cover size changes, so
each grid observes its own scroller -- keyed on the spacing, or every
pixel of a drag rebuilds a layout that comes out the same. And
`cover-grid`'s ScrollManager took `GRID_GAP`/`GRID_PADDING` as
constants, which stopped describing anything the moment the spacing
became elastic: it asks the host for the geometry now, since a scroll
position rebuilt from a stale 8px lands in the wrong row.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01MeQt5hgXg5YGoNZQ9ozG7L

frontend/src/components/artists-view/artists-view.ts

@@ -10,6 +10,7 @@ import type {
     VisibilityChangedEvent,
 } from '@lit-labs/virtualizer';
 import { grid } from '@lit-labs/virtualizer/layouts/grid.js';
+import { gridSpacingFor } from '@utils/grid-spacing';
 import {
     GetAlbumsByArtist,
     GetFilePathsByAlbums,
@@ -147,8 +148,6 @@ export class ArtistsView
 
     // ----- Grid spacing constants -----
 
-    private static readonly GRID_GAP = 8;
-    private static readonly GRID_PADDING = 8;
     private static readonly CARD_PADDING = 5;
 
     private get imageSize(): number {
@@ -177,20 +176,41 @@ export class ArtistsView
     private createGridLayout() {
         const w = this.cardSize ?? CARD_SIZE_DEFAULT;
         const h = w + this.cardTextHeight;
-        const gap = ArtistsView.GRID_GAP;
-        const pad = ArtistsView.GRID_PADDING;
+
+        // One number for the gap, the row gap and the padding: whatever
+        // a row could not spend on another card, shared out equally, so
+        // the outside is never wider than the inside.  See
+        // `utils/grid-spacing.ts`.
+        const spacing = this.spacingFor(this.containerWidth);
+
+        this.lastLayoutSpacing = spacing;
 
         return grid({
             itemSize: {
                 width: `${w}px`,
                 height: `${h}px`,
             },
-            gap: `${gap}px`,
-            padding: `${pad}px`,
-            justify: 'center',
+            gap: `${spacing}px`,
+            padding: `${spacing}px`,
+            justify: 'start',
         });
     }
 
+    /** The width the grid lays itself out in. */
+    private get containerWidth(): number {
+        return (
+            this.renderRoot?.querySelector<HTMLElement>(
+                '.grid-scroll-container',
+            )?.clientWidth ||
+            this.clientWidth ||
+            0
+        );
+    }
+
+    private spacingFor(width: number): number {
+        return gridSpacingFor(width, this.cardSize);
+    }
+
     /** Sort direction for the artist grid.
      *
      *  There is only one key to sort by: `library.Artist` carries a
@@ -478,6 +498,8 @@ export class ArtistsView
     override disconnectedCallback() {
         super.disconnectedCallback();
         this.detachWheelListener();
+        this.gridResizeObserver?.disconnect();
+        this.gridResizeObserver = null;
     }
 
     /** The wheel listener and the scroll debounce belong to the grid
@@ -730,10 +752,34 @@ export class ArtistsView
      * ================================================================ */
 
     private lastLayoutWidth = 0;
+    private lastLayoutSpacing = 0;
+
+    /** Watches the scroller so a window resize rebuilds the layout:
+     *  the spacing is derived from its width, and nothing else asks
+     *  this view to update when only that changes. */
+    private gridResizeObserver: ResizeObserver | null = null;
+
+    private observeGridWidth() {
+        const container =
+            this.renderRoot?.querySelector<HTMLElement>(
+                '.grid-scroll-container',
+            );
+
+        if (!container || this.gridResizeObserver) return;
+
+        this.gridResizeObserver = new ResizeObserver(() =>
+            this.requestUpdate(),
+        );
+        this.gridResizeObserver.observe(container);
+    }
 
     private updateGridLayout() {
+        this.observeGridWidth();
+
         if (
-            this.cardSize === this.lastLayoutWidth
+            this.cardSize === this.lastLayoutWidth &&
+            this.lastLayoutSpacing ===
+                this.spacingFor(this.containerWidth)
         ) {
             return;
         }