From 25f62e169e049f0757ef611d5b409e7523958dee Mon Sep 17 00:00:00 2001 From: Christophe Besson Date: Wed, 16 Sep 2026 16:07:06 +0200 Subject: music: pool single-album artists into shared rows An artist with one album got a heading and one cover on a row that fits five, and a library is mostly single-album artists. Consecutive singles share one grid, in place, so the page stays in artist order. Each pooled cover keeps its artist's name above it in the same type as a section heading. Dropping it was the first version and it was wrong: scrolling then alternates between artists written large and small. Measured on the probe's fixture: 4208px to 1895px, and a walk of the page reaches all 21 covers instead of 9. Co-Authored-By: Claude Opus 5 --- .../meshbay-hub/src/meshbay_hub/static/style.css | 24 ++++++++++++++++++++++ 1 file changed, 24 insertions(+) (limited to 'packages/meshbay-hub/src/meshbay_hub/static/style.css') diff --git a/packages/meshbay-hub/src/meshbay_hub/static/style.css b/packages/meshbay-hub/src/meshbay_hub/static/style.css index 2bf0b18..5ef04b0 100644 --- a/packages/meshbay-hub/src/meshbay_hub/static/style.css +++ b/packages/meshbay-hub/src/meshbay_hub/static/style.css @@ -5044,6 +5044,12 @@ h2 .gn-owner, h3 .gn-owner { font-size: 0.55em; } max-height: calc(100vh - 16px); overflow-x: hidden; overflow-y: auto; + /* Wheeling past the last track must not carry on into the page behind: that + scroll is a real page scroll, and a page scroll closes this menu on + purpose (menu.js). Without this, reaching the end of a long tracklist + dismisses the menu, which is the same symptom the scroll handler was just + fixed for, arriving by a different door. */ + overscroll-behavior: contain; padding: 4px 0; background: var(--bg-surface); border: 1px solid var(--border); @@ -5192,3 +5198,21 @@ h2 .gn-owner, h3 .gn-owner { font-size: 0.55em; } overflow: hidden; text-overflow: ellipsis; } + +/* A run of single-album artists, pooled into one grid so five of them fill one + row instead of spending five (music-app.js `albumSections`). + + Each cell keeps its artist's name above the cover, in the same type as a + multi-album artist's heading. Dropping it — the first version of this — made + scrolling alternate between artists written large and artists written small, + which is a worse problem than the whitespace it saved. */ +.music-artist-pool { margin-bottom: 22px; } +.music-pool-cell { display: flex; flex-direction: column; min-width: 0; } +/* One line, clipped. A cell is about 170px wide, and a heading that wrapped to + two lines would push its own cover below the others on its row — the grid + stretches the cell, it does not align what is inside it. */ +.music-pool-heading { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} -- cgit v1.2.3