Operator UI review: artists/albums layout had a full-row letter
divider per first-character, so a section like '2' (one artist)
left 9 empty cells before '8' (one artist) started a new row. Lots
of dead space across letters with few entries.
Operator chose option 2: drop the dividers, add a side jump-bar.
- AlphabeticalGrid no longer renders per-letter row-spanning
dividers. Items flow continuously across the grid; first item
of each letter gets id='alpha-<letter>' so the rail can target
it via scrollIntoView.
- New sticky vertical alphabet rail on the right. position:sticky
+ top:50% + translateY keeps it vertically centered in the
viewport while the grid scrolls underneath.
- Each rail entry is a focusable button with aria-label='Jump to
<letter>'. Hover/focus tinted with accent.
- Only renders when there's more than one distinct letter so
small libraries (or filter-narrowed views) don't get an empty
rail.
Test rewritten — letters are buttons on the rail, not dividers in
the grid. Three assertions:
- one jump button per distinct first-letter
- DOM order is items first then rail (was rail-then-items before)
- first item of each letter carries the alpha-<letter> id
bvandeusen