Fix layout shift

pwizla · pwizla · commit 4a5e8a802e4b · 2025-11-21T13:56:05.000+01:00
The `main` element is, weirdly enough, not part of the `docRoot`
element at first load. So I'm just specifically targeting the docRoot
width under these conditions.
diff --git a/docusaurus/src/scss/_base.scss b/docusaurus/src/scss/_base.scss
@@ -24,6 +24,10 @@ main {
   }
 }
 
+  [class*="docRoot"]:not(:has(main)) {
+    width: 0;
+  }
+
 /**
  * Experimental: Different identity based on URL
  */
@@ -59,8 +63,13 @@ main {
       padding-right: 32px !important;
     }
   }
+
+  [class*="docRoot"]:not(:has(main)) {
+    width: 300px;
+  }
 }
 
+
 /** Dark mode */
 @include dark {
   .container img[width="16"] {

Original file line number	Diff line number	Diff line change
`@@ -24,6 +24,10 @@ main {`
`24`	`24`	`}`
`25`	`25`	`}`
`26`	`26`
	`27`	`+ [class*="docRoot"]:not(:has(main)) {`
	`28`	`+ width: 0;`
	`29`	`+ }`
	`30`	`+`
`27`	`31`	`/**`
`28`	`32`	`* Experimental: Different identity based on URL`
`29`	`33`	`*/`
`@@ -59,8 +63,13 @@ main {`
`59`	`63`	`padding-right: 32px !important;`
`60`	`64`	`}`
`61`	`65`	`}`
	`66`	`+`
	`67`	`+ [class*="docRoot"]:not(:has(main)) {`
	`68`	`+ width: 300px;`
	`69`	`+ }`
`62`	`70`	`}`
`63`	`71`
	`72`	`+`
`64`	`73`	`/** Dark mode */`
`65`	`74`	`@include dark {`
`66`	`75`	`.container img[width="16"] {`