From 1ad29298494d26dfd8b63b69a5497a421a21d576 Mon Sep 17 00:00:00 2001
From: Doxa Maps <maps@doxa.example>
Date: Thu, 1 Oct 2026 11:46:43 +0000
Subject: [PATCH] PosterWall: a collapsible wall no longer scrolls sideways by
 4px

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.
---
 library/components/poster/PosterWall.vue | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/library/components/poster/PosterWall.vue b/library/components/poster/PosterWall.vue
index 0e43501a3..7734934dd 100644
--- a/library/components/poster/PosterWall.vue
+++ b/library/components/poster/PosterWall.vue
@@ -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;' +