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:
commit
30fbc659ed
4 changed files with 41 additions and 4 deletions
|
|
@ -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{
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in a new issue