From 028cc2c76e540c595e55a399606701490afd4beb Mon Sep 17 00:00:00 2001
From: Divyansh Singh <40380293+brc-dd@users.noreply.github.com>
Date: Tue, 25 Oct 2022 22:47:44 +0530
Subject: [PATCH] fix(banner): broken layout on smaller viewports (#1536)

---
 src/client/theme-default/components/VPContent.vue  | 10 +++++++---
 src/client/theme-default/components/VPLocalNav.vue |  1 +
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/client/theme-default/components/VPContent.vue b/src/client/theme-default/components/VPContent.vue
index 8c11a740462..8f4e1e1ece0 100644
--- 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
index 29d323f3380..a7a6a3de1eb 100644
--- 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) {