doxa-life/doxa-maps
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

PosterWall: a collapsible wall no longer scrolls sideways by 4px

Browse source 
A collapsible section head is a <button> with width:100%, but it keeps the
2px side margins of .sec-head, so it overflowed the wall's content box by 4px.
Its full-bleed ::before (left/right -20px) then reached 2px past the wall on each
side, so every collapsible wall (Poster Design's Styles, Country Posters) had
scrollWidth = clientWidth + 4 at 390, 768 and 1024. The head is now
calc(100% - 4px), the width a non-collapsible head already gets.

Measured on the built poster-design and country-posters bundles (div.wall
scrollWidth vs clientWidth at 390/768/1024/1440): before, +4 at the first three
widths on both walls; after, equal at all four. UPG-100's wall (no toggles)
was already equal.
This commit is contained in:
Doxa Maps 2026-10-01 11:46:43 +00:00
parent 671295b5b1
commit 1ad2929849
1 changed files with 4 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
library/components/poster/PosterWall.vue
View file

@ -1239,7 +1239,10 @@ useShadowStyles(
// therefore silently won the cascade — so `background:none` here made the sticky
// header transparent and the poster cards scrolled visibly through the region
// name. The base rule owns the fill; this rule owns only button chrome.
'.sec-head.is-toggle{cursor:pointer;user-select:none;width:100%;text-align:left;' +
// ★ calc(100% - 4px), NOT 100%: the head keeps the 2px side margins of .sec-head, so a full-width button
// overflowed the wall's content box by 4px. Its full-bleed ::before (left/right -20px) then reached 2px past
// the wall on each side, and a collapsible wall scrolled sideways by 4px at any width (scrollWidth 394 in 390).
'.sec-head.is-toggle{cursor:pointer;user-select:none;width:calc(100% - 4px);text-align:left;' +
'border-top:0;border-left:0;border-right:0;font:inherit;color:inherit}' +
'.sec-head.is-toggle:hover .sec-name{color:#10b981}' +
'.sec-caret{display:inline-block;width:12px;font-size:10px;opacity:.55;' +