GUI: the page scrolls past the player bar when a list has explicit songs #878

What happened

In the desktop app the whole page can scroll down past the player bar, into an empty black area. It happens when the open list has explicit songs (the ones with the E badge). How far the page scrolls depends on where those songs are in the list, and it changes as I scroll the list. With no explicit songs there is still a 1 px scroll, so a page scrollbar always shows at the right edge of the window.

What I expect: the page itself never scrolls. Only the panels inside it scroll.

Steps to reproduce

1. Start the desktop app (or spotatui-gui) and open a long playlist that has explicit songs further down the list.
2. Scroll the mouse wheel over the track list, or drag the scrollbar at the right edge of the window.
3. See the whole page move up, with black space under the player bar.

Frontend

Desktop app (the browser GUI has it too)

Source

Spotify

spotatui version

main at 39b0237 (the E badge from #838 is not in a release yet)

OS

Windows 11

How you installed spotatui

Built from source

Cause

Each explicit row has hidden screen-reader text next to its E badge: <span className="sr-only">{s.explicit}</span> in gui/src/TrackTable.tsx line 158. The .sr-only rule in gui/src/style.css (line 40) sets position: absolute but no top or left. The track list has no positioned parent, so the hidden text stays at its place in the list but the list's scroll box does not clip it, and the document grows to hold it. The two live regions in gui/src/Toast.tsx (lines 28 and 31) use the same rule. They sit just under the shell and add the 1 px.

I measured it in Chromium with a 1290x800 window and an 80-track playlist where every 7th song is explicit:

Where to look

• gui/src/style.css line 40: the .sr-only rule.
• gui/src/TrackTable.tsx line 158: the hidden "Explicit" text.
• gui/src/Toast.tsx lines 28 and 31: the two live regions.
• gui/e2e/scenes.shot.ts line 94: the library playlist scene, which opens a playlist from the filmScores fixture in gui/e2e/fixtures.ts (line 762).

Possible solution

• Add top: 0; and left: 0; to .sr-only in gui/src/style.css. The text stays 1 px and clipped, so nothing changes on screen, and screen readers still read it in DOM order.
• Add an e2e check: open a playlist with explicit songs below the visible part of the list, and assert that document.documentElement.scrollHeight equals window.innerHeight. The filmScores fixture has only 4 songs, so make a longer table for this check.

Things to avoid:

• Don't set overflow: hidden on body or .shell. That hides the symptom, and the real cause stays.
• Don't remove the hidden text. Screen readers need it.

Done when

• In the desktop app, a long playlist with explicit songs does not let the page scroll, and no page scrollbar shows.
• The new e2e check fails without the CSS change and passes with it.
• npm run lint, npm run format:check, npm run typecheck and npm test pass in gui/.