diff --git a/core/themes/olivero/css/layout/layout.css b/core/themes/olivero/css/layout/layout.css index 375359860382d7012f651ebb56fd34bbadd984d2..a57e5e7fee1428f992a98ed85fdfb5f548a2f36e 100644 --- a/core/themes/olivero/css/layout/layout.css +++ b/core/themes/olivero/css/layout/layout.css @@ -65,3 +65,12 @@ body.is-fixed .container { padding-block-start: var(--sp5); } } + +/* + * Contextual link wrappers load without the ".contextual" CSS class, which + * causes layout shifts. We fix this by setting this to position: absolute; + */ + +[data-contextual-id]:not(.contextual) { + position: absolute; +} diff --git a/core/themes/olivero/css/layout/layout.pcss.css b/core/themes/olivero/css/layout/layout.pcss.css index ded782cd0869c4b91b549c69d7149da8c7c1eaa7..eed28ec0716f2e5cd1407ec76eb2aa0b2530c722 100644 --- a/core/themes/olivero/css/layout/layout.pcss.css +++ b/core/themes/olivero/css/layout/layout.pcss.css @@ -55,3 +55,11 @@ padding-block-start: var(--sp5); } } + +/* + * Contextual link wrappers load without the ".contextual" CSS class, which + * causes layout shifts. We fix this by setting this to position: absolute; + */ +[data-contextual-id]:not(.contextual) { + position: absolute; +} diff --git a/core/themes/olivero/css/layout/region.css b/core/themes/olivero/css/layout/region.css index e6a968ddcad3ee8e754bb6c16ab28095c3bd89b0..a1bfc22c3fc5599d4b42500a1ff92c22bc0a40cf 100644 --- a/core/themes/olivero/css/layout/region.css +++ b/core/themes/olivero/css/layout/region.css @@ -10,18 +10,18 @@ * Region default layout. */ -.region > * { +.region > *:where(:not([data-big-pipe-placeholder-id])) { margin-block-end: var(--sp); } @media (min-width: 43.75rem) { - .region > * { + .region > *:where(:not([data-big-pipe-placeholder-id])) { margin-block-end: var(--sp2); } } @media (min-width: 62.5rem) { - .region > * { + .region > *:where(:not([data-big-pipe-placeholder-id])) { margin-block-end: var(--sp3); } } diff --git a/core/themes/olivero/css/layout/region.pcss.css b/core/themes/olivero/css/layout/region.pcss.css index c04a060616615a063178d92dedff027f33bc03e4..dc6fbb289206de73a82f21f4ea4f2a14cc14e190 100644 --- a/core/themes/olivero/css/layout/region.pcss.css +++ b/core/themes/olivero/css/layout/region.pcss.css @@ -5,7 +5,7 @@ @import "../base/media-queries.pcss.css"; -.region > * { +.region > *:where(:not([data-big-pipe-placeholder-id])) { margin-block-end: var(--sp); @media (--md) {