fix(banner): broken layout on smaller viewports (#1536)

vuejs · Oct 25, 2022 · 028cc2c · 028cc2c
1 parent fd609f5
commit 028cc2c
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 3 deletions.
diff --git a/src/client/theme-default/components/VPContent.vue b/src/client/theme-default/components/VPContent.vue
@@ -52,7 +52,7 @@ const NotFound = inject('NotFound')
 .VPContent {
   flex-grow: 1;
   flex-shrink: 0;
-  margin: 0 auto;
+  margin: var(--vp-layout-top-height, 0px) auto 0;
   width: 100%;
 }
 
@@ -61,13 +61,17 @@ const NotFound = inject('NotFound')
   max-width: 100%;
 }
 
+.VPContent.has-sidebar {
+  margin: 0;
+}
+
 @media (min-width: 960px) {
   .VPContent {
-    padding-top: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px));
+    padding-top: var(--vp-nav-height);
   }
 
   .VPContent.has-sidebar {
-    margin: 0;
+    margin: var(--vp-layout-top-height, 0px) 0 0;
     padding-left: var(--vp-sidebar-width);
   }
 }

diff --git a/src/client/theme-default/components/VPLocalNav.vue b/src/client/theme-default/components/VPLocalNav.vue
@@ -48,6 +48,7 @@ function scrollToTop() {
   width: 100%;
   background-color: var(--vp-c-bg);
   transition: border-color 0.5s, background-color 0.5s;
+  margin-top: var(--vp-layout-top-height, 0px);
 }
 
 @media (min-width: 960px) {