Skip to content

Commit 1c2425a

Browse files
b0bbywanclaude
andcommitted
fix(ui): cap the art and tracklist without container queries
container-type and cqw land in chromium 105. The framebuffer browser runs QtWebEngine 5.15, i.e. chromium 87, which drops the cqw declaration and the cap with it: the cover art stretches and the tracklist grows down the page instead of scrolling inside its card. On the 480px tall screens those pi setups use, one long queue pushes everything else off screen. A vh fallback ahead of the cqw value covers those engines and costs the newer ones nothing. Both rules take the same value, the tracklist being sized to the cover's footprint so the card keeps its height when toggling between the two views. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_018ttTauWYwg5MhzapKNY4R3
1 parent bbb33c1 commit 1c2425a

1 file changed

Lines changed: 7 additions & 0 deletions

File tree

ui/styles/input.css

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -230,14 +230,21 @@ button.htmx-request {
230230
@apply rotate-180;
231231
}
232232

233+
/* Container queries land in chromium 105 and the framebuffer browser runs
234+
87, where the cqw declaration is dropped and the cap with it: the art
235+
stretches and the tracklist grows instead of scrolling, which swamps a
236+
480px tall pi screen. The vh fallback has to stay the same on both so
237+
the card keeps its height when toggling between the two views. */
233238
.player-art {
234239
@apply mx-auto w-full max-w-[75%] rounded-md mb-2 cursor-zoom-in;
240+
max-height: 50vh;
235241
max-height: 75cqw;
236242
}
237243

238244
/* Tracklist view — capped to the cover's footprint, scrolls inside */
239245
.tracklist {
240246
@apply mb-3 overflow-y-auto rounded-md px-2;
247+
max-height: 50vh;
241248
max-height: 75cqw;
242249
}
243250

0 commit comments

Comments
 (0)