Merge upg100/pane-clip into development (handoff)

# Conflicts:
#	public/dx-maps/country-posters/countries-map/index.html
#	public/dx-maps/country-posters/country-poster-wall/index.html
#	public/dx-maps/country-posters/country-posters-mfe/index.html
#	public/dx-maps/doxa-maps-spa/manifest.json
#	public/dx-maps/manifest.json
#	public/dx-maps/my-upg-100-list/poster-wall/index.html
#	public/dx-maps/my-upg-100-list/upg-100-list/index.html
#	public/dx-maps/my-upg-100-list/upg-100-mfe/index.html
#	public/dx-maps/regions-dashboard/region-dashboards/index.html
#	public/dx-maps/regions-dashboard/regions-list/index.html
#	public/dx-maps/regions-dashboard/regions-mfe/index.html
This commit is contained in:
Doxa Maps 2026-09-29 14:53:54 +00:00
commit 30fbc659ed
4 changed files with 41 additions and 4 deletions

View file

@ -56,9 +56,31 @@ export const PANE_GRID_STYLES = `
.pane{
position:relative; width:100%; height:100%;
scroll-snap-align:start; scroll-snap-stop:always;
/* ★ A PANE NEVER PAINTS OUTSIDE ITS OWN BOX. The UPG-100 wall's first card row runs past the list
pane's bottom (rega's census: cards to y 142 against a pane ending at 57, 14 wall elements inside
the map area at 1440, on every surface), and on the standalone leaf the tapes' z-index painted
that overflow OVER the map pane below. Whatever stacking context differs between surfaces, content
outside a pane is not the reader's to see: clip at the pane. overflow, NOT contain/isolation —
those would make each pane the containing block / stacking context for position:fixed modal
scrims and trap them under a host's nav rail (VerticalTabsLayout records that regression).
clip, with hidden as the fallback for engines without it: hidden alone leaves the pane a scroll
container, so focus() or scrollIntoView() on content in the overflowing row would scroll the PANE
and shift the wall inside it. clip only clips paint. Neither makes a containing block for fixed. */
overflow:hidden;
overflow:clip;
}
/* The live custom element fills its pane. */
.pane > .pane-mount{ position:absolute; inset:0; }
.pane > .pane-mount{
position:absolute; inset:0;
/* ★ THE PANE ALREADY SIZES ITS ELEMENT, SO THE ELEMENT OPTS OUT OF THE VIEWPORT FLOOR. ProfileLoader's
wrapper has min-height: var(--profile-min-h, 100dvh) (library/ProfileLoader.vue), and a host that
gives the element a definite height sets --profile-min-h:0 — the Gallery (.dms-pane), VerticalTabs
and plugin-studio all do. The pane column never did, so on the standalone leaf each pane's wrapper
was 100dvh (900) inside an 843 pane: the wall scroller ran 57 px past its pane (its tapes painted
over the map, and Tab into row 1 scrolled the COLUMN instead of the wall). Inherited, so it crosses
into each element's shadow root, where no selector here can reach. */
--profile-min-h:0;
}
/* Placeholder copy for a pane whose profile is not built yet — same card styling
as the wrapper's own placeholder so an unbuilt pane never looks broken. */
.pane-placeholder{

View file

@ -1487,8 +1487,13 @@
.pane{
position:relative; width:100%; height:100%;
scroll-snap-align:start; scroll-snap-stop:always;
overflow:hidden;
overflow:clip;
}
.pane > .pane-mount{
position:absolute; inset:0;
--profile-min-h:0;
}
.pane > .pane-mount{ position:absolute; inset:0; }
.pane-placeholder{
position:absolute; inset:0; display:grid; place-items:center; padding:24px;
text-align:center;

View file

@ -877,8 +877,13 @@
.pane{
position:relative; width:100%; height:100%;
scroll-snap-align:start; scroll-snap-stop:always;
overflow:hidden;
overflow:clip;
}
.pane > .pane-mount{
position:absolute; inset:0;
--profile-min-h:0;
}
.pane > .pane-mount{ position:absolute; inset:0; }
.pane-placeholder{
position:absolute; inset:0; display:grid; place-items:center; padding:24px;
text-align:center;

View file

@ -112,8 +112,13 @@ ${m}}`}).join(`
.pane{
position:relative; width:100%; height:100%;
scroll-snap-align:start; scroll-snap-stop:always;
overflow:hidden;
overflow:clip;
}
.pane > .pane-mount{
position:absolute; inset:0;
--profile-min-h:0;
}
.pane > .pane-mount{ position:absolute; inset:0; }
.pane-placeholder{
position:absolute; inset:0; display:grid; place-items:center; padding:24px;
text-align:center;