fix(ui): stop the album grid eating the year it was sorted by

The year sat inside the same ellipsis box as the title, so it was the
first thing truncation took: a card wide enough for a long album name
never showed its year, and browsing the grid *by year* showed years
only for the albums with short names. The sort said one thing and the
cards showed another.

Title and year are now a flex row where only the title gives way. A
row rather than a second line, because the card's height is what the
virtualizer measures rows by.

Refs #29

frontend/src/components/cover-grid/cover-grid-styles.ts

@@ -111,13 +111,32 @@ const gridStyles = css`
         scale: 0.95;
     }
 
+    /* Title and year on one line, and only the title truncates.
+
+       The year used to be part of the same run of text, so it was the
+       first thing an ellipsis ate: a card wide enough for a long album
+       name never showed its year, and browsing by year showed years
+       only for the albums with short names -- the sort said one thing
+       and the cards showed another.
+
+       A flex row rather than a second line, because the card's height
+       is what the virtualizer measures rows by. */
     .album-name {
         font-size: var(--album-name-font, 14px);
         font-weight: 400;
         color: var(--yj-text-primary, #fff);
+        display: flex;
+        justify-content: center;
+        align-items: baseline;
+        gap: 0.35em;
+        min-width: 0;
+    }
+
+    .album-title {
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
+        min-width: 0;
     }
 
     .artist-name {
@@ -131,6 +150,8 @@ const gridStyles = css`
 
     .album-year {
         color: var(--yj-text-tertiary, #888);
+        flex: 0 0 auto;
+        white-space: nowrap;
     }
 
     /* ========================================

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

@@ -1898,10 +1898,10 @@ export class CoverGrid
                         class="album-name"
                         title="${album.Name}"
                     >
-                        ${album.Name}${album.Year
-                ? html`
-                              <span class="album-year">
-                                  (${album.Year})</span
+                        <span class="album-title">${album.Name}</span
+                        >${album.Year
+                ? html`<span class="album-year"
+                                  >(${album.Year})</span
                               >`
                 : nothing}
                     </div>