fix: docs layout shifting

radix-vue · Oct 16, 2023 · 12eaf83 · 12eaf83
1 parent 970a16d
commit 12eaf83
Showing 1 changed file with 21 additions and 3 deletions.
diff --git a/docs/.vitepress/theme/style.css b/docs/.vitepress/theme/style.css
@@ -75,9 +75,27 @@
   }
 }
 
-/* body {
-  --vp-layout-max-width: calc(1440px + var(--scrollbar-width, 0px));
-} */
+
+/* Fix the layout shift for Vitepress https://github.com/vuejs/vitepress/pull/1844/files */
+@media (min-width: 768px) {
+  .VPContent, .VPLocalNav, .VPNav, .VPHome {
+    width: 100vw !important;
+  }
+  .VPFooter {
+    width: 100vw !important;
+    padding: 32px !important;
+  }
+}
+@media (min-width: 1440px) {
+  .VPSidebar {
+    padding-left: max(32px, calc((100vw - (var(--vp-layout-max-width) - 64px)) / 2)) !important;
+    width: calc((100vw - (var(--vp-layout-max-width) - 64px)) / 2 + var(--vp-sidebar-width) - 32px) !important;
+  }
+}
+
+body {
+  overflow-x: hidden;
+}
 
 /**
  * Component: Algolia