fix: sha256:6ca3fe6dcccc6a9d780493cde740ba4f2fb028e71f43c771c58703e2b7cb80b1 · gabriel/musehub

fix(#139): viewport-locked app-shell for issues list; two real flex/grid gotchas found

Converts the issues list page (isl-*) from calc()-based per-column max-height to a viewport-locked flex shell: body.app-shell claims height:100dvh once, every fixed-height sibling above the scrollable region is flex-shrink:0, and the two-column grid + its columns are flex:1/min-height:0 — no --sticky-offset, no magic numbers.

Two real bugs found via headless-browser verification (Playwright), neither related to the zoom/dvh theory initially suspected: - align-items:start on the grid sized columns to their own content instead of stretching to the row's flex-derived height, so overflow-y:auto never had a bounded box to clip against. - issue_list.html's .card wrapper (overflow:hidden, for rounded corners) is a flex item inside isl-main; flex-shrink defaults to 1, so it silently shrank to fit instead of overflowing, eating all content past the fold with no scrollbar anywhere. Needs flex-shrink:0.

Verified: independent scroll on both columns, mobile breakpoint stacks to normal single-column scroll with footer restored, desktop footer hidden without overlap.

symbols added

symbols modified

dead code introduced

Semantic Changes 13 symbols

~ docs/issues/two-column-app-shell-refactor.md .md 1 symbol added, 1 symbol modified

+ Findings while converting the issues list page (first page done) section Findings while converting the issues list page (first page done) L108–149

~ Two-column layout: replace calc()-based heights with a viewport-locked flex shell

~ musehub/templates/musehub/base.html .html

~ musehub/templates/musehub/pages/issue_list.html .html 2 symbols modified

~ aside@152

~ form@47

~ src/scss/_layout.scss .scss 4 symbols added

+ #content rule #content L519–525

+ container-wide, #content rule .container-wide, #content L536–540

+ repo-tabs, > #htmx-loading rule .musehub-navbar, > #repo-header, > .repo-tabs, > #htmx-loading L504–509

+ app-shell rule body.app-shell L498–546

~ src/scss/pages/_issues.scss .scss 1 symbol added, 4 symbols modified

+ card rule .card L59–61

~ isl-layout

~ isl-main

~ isl-page

~ isl-sidebar

Older docs: track issue #139 (two-column app-shell refactor) plan doc … sha256:649011bedd713e22f7dca4c4be94bdefbf3b10950d9fc80235928d0b0b823be8 All commits Newer fix(#139): app-shell for issue detail; fix zoom clipping the las… sha256:c1d980625041d62afc5242a6ac466323937217d63fb8e601afd7b3be22a85876

0 comments

No comments yet. Be the first to start the discussion.

To add a comment, use the Muse CLI: muse hub commit comment sha256:6ca3fe6dcccc6a9d780493cde740ba4f2fb028e71f43c771c58703e2b7cb80b1 --body "your comment"