discoman/python-tdd
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

billboard applets view: stop the top-fade mask clipping the first applet

Browse Source 
The billboard applets view (.billboard-page) was a plain page-level scroller, unlike .gameboard-page / .dashboard-page (flex columns whose applet grid fills the aperture and scrolls internally). So #id_billboard_applets_container (flex:1, from %applets-grid) had no flex parent — it grew to its full content height, and the shared %applets-grid `transparent 0% -> black 2%` top-fade became 2% of that tall box, fading away the top of the first applet (newly visible now that New Post carries the --duoUser felt).

Fix — match the other two boards:
- .billboard-page: display:flex; flex-direction:column; overflow:hidden (overrides %billboard-page-base's overflow-y:auto).
- #id_billboard_applets_wrapper (the extra hx-swap wrapper the other boards don't have): display:flex; flex-direction:column; flex:1; min-height:0 — passes the flex height through so the grid is aperture-constrained with an internal scroll. Its top-fade is now the same small fade as gameboard/dashboard.

Verified: BillboardAppletsTest.test_billboard_shows_three_applets + test_toggling_applets_keeps_content_and_persists_per_applet green (the pair-run flake was the known Selenium memory-pressure NoSuchWindow, not a regression — both pass in isolation).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Disco DeDisco
2026-06-01 21:39:35 -04:00
parent 430c3bf141
commit 22fc38b92b
1 changed files with 20 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/static_src/scss/_billboard.scss
View File

@@ -185,6 +185,26 @@ body.page-billposts {
.billboard-page { .billboard-page {
@extend %billboard-page-base; @extend %billboard-page-base;
// Match .gameboard-page / .dashboard-page: a flex column whose applet grid
// fills the aperture and scrolls INTERNALLY. Without this .billboard-page
// was a plain page-level scroller, so #id_billboard_applets_container
// (flex:1) had no flex parent, grew to its full content height, and the
// shared %applets-grid `2%` top-fade became 2% of that tall box — clipping
// the first applet. The wrapper below passes the flex height through.
display: flex;
flex-direction: column;
overflow: hidden;
}
// The billboard applets view nests its grid one level deeper than the other
// boards (an hx-swap wrapper around the menu + grid). Pass the flex height
// through so the grid is aperture-constrained (flex:1 + min-height:0), not
// content-tall — keeping its top-fade mask aligned with gameboard/dashboard.
#id_billboard_applets_wrapper {
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
} }
// ── Billscroll page (single full-aperture applet) ────────────────────────── // ── Billscroll page (single full-aperture applet) ──────────────────────────