fix: Avoid layout shift when scrollbar appears (#256)

MoritzWeber0 · web-flow · commit fd523b5582e6 · 2025-07-24T21:53:40.000+02:00
A different approach after #193 had to be reverted.
diff --git a/assets/sass/navigation.scss b/assets/sass/navigation.scss
@@ -1,15 +1,13 @@
-#header {
+
+.o-header {
   position: sticky;
   width: 100%;
   top: 0;
   box-shadow: 0 .4rem 1rem 0 rgba(0,0,0,.1);
-}
-
-.o-header {
   background-color: var(--bg-default);
   z-index: 5;
-  position: relative;
   height: 6rem;
+  padding-left: calc((100vw - 100%) / 2);
 }
 
 .o-header__wrapper {
diff --git a/assets/sass/print.scss b/assets/sass/print.scss
@@ -14,14 +14,13 @@
         margin-bottom: 1rem;
     }
 
-    main > .o-container.o-single,
-    main > .o-container.o-list {
+    main > .o-container > .o-single,
+    main > .o-container > .o-list {
         margin-top: 0;
     }
 
     .o-single__container,
-    .o-container,
-    main > .o-container {
+    .o-container {
         padding: 0;
     }
 
diff --git a/assets/sass/styles.scss b/assets/sass/styles.scss
@@ -49,6 +49,7 @@ a {
 
 main {
   margin-top: 2rem;
+  padding-left: calc(100vw - 100%);
 }
 
 .o-container {
@@ -85,7 +86,7 @@ main {
   padding: 2rem;
 }
 
-main > .o-container:is(.o-single--with-sidemenu) {
+.o-single--with-sidemenu {
   background-color: unset;
   padding: 0;
 
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
@@ -8,7 +8,11 @@
   </head>
   <body>
     <header id="header" class="o-header">{{ partialCached "header.html" . }}</header>
-    <main id="content" class="o-container{{ if .IsHome }} o-startpage{{ end }}">{{ block "main" . }}{{ end }}</main>
+    <main id="content" class="{{ if .IsHome }} o-startpage{{ end }}">
+      <div class="o-container">
+        {{ block "main" . }}{{ end }}
+      </div>
+    </main>
     <footer class="o-footer o-container">{{ partial "footer.html" . }}</footer>
     {{ if and (eq .Kind "page") (or (eq .Page.Type "country") (eq .Page.Type "operator")) }}
       {{ partial "snackbar" . }}
diff --git a/layouts/_default/list.html b/layouts/_default/list.html
@@ -1,5 +1,5 @@
 {{ define "main" }}
-  <div class="o-container o-list">
+  <div class="o-list">
     <div>
       <h1 data-pagefind-meta="title">{{ .Title }}</h1>
       {{ .Content }} {{ range .Pages }}
diff --git a/layouts/country/single.html b/layouts/country/single.html
@@ -1,7 +1,7 @@
 {{ define "main" }}
 {{ $related := .Site.RegularPages.RelatedIndices . "country" }}
 
-<article class="o-container o-single o-single--with-sidemenu">
+<article class="o-single o-single--with-sidemenu">
     {{ partial "sidemenu" . }}
     <div class="o-single__content-wrapper" data-pagefind-body>
         <div class="o-single__container content_with_heading">
diff --git a/layouts/news/list.html b/layouts/news/list.html
@@ -1,5 +1,5 @@
 {{ define "main" }}
-  <article class="o-container o-list o-list--news">
+  <article class="o-list o-list--news">
     <div>
       <h1 data-pagefind-meta="title">{{ .Title }}</h1>
       {{ .Content }}
diff --git a/layouts/news/single.html b/layouts/news/single.html
@@ -1,5 +1,5 @@
 {{ define "main" }}
-    <article class="o-container o-single o-single--with-sidemenu">
+    <article class="o-single o-single--with-sidemenu">
         <aside id="aside" class="o-aside">
             {{ partial "image" (partial "helper/contentImage" . ) }}
             <div class="o-single__container">
diff --git a/layouts/operator/single.html b/layouts/operator/single.html
@@ -1,5 +1,5 @@
 {{ define "main" }}
-    <article class="o-container o-single o-single--with-sidemenu">
+    <article class="o-single o-single--with-sidemenu">
         {{ partial "sidemenu" . }}
         <div class="o-single__content-wrapper" data-pagefind-body>
             <div class="o-single__container content_with_heading">

Original file line number	Diff line number	Diff line change
`@@ -14,14 +14,13 @@`
`14`	`14`	`margin-bottom: 1rem;`
`15`	`15`	`}`
`16`	`16`
`17`		`- main > .o-container.o-single,`
`18`		`- main > .o-container.o-list {`
	`17`	`+ main > .o-container > .o-single,`
	`18`	`+ main > .o-container > .o-list {`
`19`	`19`	`margin-top: 0;`
`20`	`20`	`}`
`21`	`21`
`22`	`22`	`.o-single__container,`
`23`		`- .o-container,`
`24`		`- main > .o-container {`
	`23`	`+ .o-container {`
`25`	`24`	`padding: 0;`
`26`	`25`	`}`
`27`	`26`
Original file line number	Diff line number	Diff line change
`@@ -49,6 +49,7 @@ a {`
`49`	`49`
`50`	`50`	`main {`
`51`	`51`	`margin-top: 2rem;`
	`52`	`+ padding-left: calc(100vw - 100%);`
`52`	`53`	`}`
`53`	`54`
`54`	`55`	`.o-container {`
`@@ -85,7 +86,7 @@ main {`
`85`	`86`	`padding: 2rem;`
`86`	`87`	`}`
`87`	`88`
`88`		`-main > .o-container:is(.o-single--with-sidemenu) {`
	`89`	`+.o-single--with-sidemenu {`
`89`	`90`	`background-color: unset;`
`90`	`91`	`padding: 0;`
`91`	`92`