fix(theme): nav background doesn't extend fully and gap after sidebar with non-overlay scrollbars

closes #4653

Co-authored-by: Burrito <[email protected]>

Author: brc-dd

src/client/theme-default/components/VPNavBar.vue

@@ -170,16 +170,22 @@ watchPostEffect(() => {
   .VPNavBar.has-sidebar .content {
     position: relative;
     z-index: 1;
-    padding-right: 32px;
     padding-left: var(--vp-sidebar-width);
   }
+
+  .VPNavBar.has-sidebar .content-body {
+    padding-right: 32px;
+  }
 }
 
 @media (min-width: 1440px) {
   .VPNavBar.has-sidebar .content {
-    padding-right: calc((100vw - var(--vp-layout-max-width)) / 2 + 32px);
     padding-left: calc((100vw - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width));
   }
+
+  .VPNavBar.has-sidebar .content-body {
+    padding-right: calc((100vw - var(--vp-layout-max-width)) / 2 + 32px);
+  }
 }
 
 .content-body {

src/client/theme-default/components/VPSidebar.vue

@@ -111,8 +111,8 @@ watch(
 
 @media (min-width: 1440px) {
   .VPSidebar {
-    padding-left: max(32px, calc((100% - (var(--vp-layout-max-width) - 64px)) / 2));
-    width: calc((100% - (var(--vp-layout-max-width) - 64px)) / 2 + var(--vp-sidebar-width) - 32px);
+    padding-left: max(32px, calc((100vw - (var(--vp-layout-max-width) - 64px)) / 2));
+    width: calc((100vw - (var(--vp-layout-max-width) - 64px)) / 2 + var(--vp-sidebar-width) - 32px);
   }
 }