From 0ee71588de2b1691b1a9287aa1daa729197fd3ca Mon Sep 17 00:00:00 2001
From: Divyansh Singh <40380293+brc-dd@users.noreply.github.com>
Date: Thu, 13 Nov 2025 14:05:15 +0530
Subject: [PATCH] fix(theme): sidebar alignment when scrollbar is there on page

closes #5027
---
 src/client/theme-default/components/VPContent.vue  |  4 ++--
 src/client/theme-default/components/VPLocalNav.vue |  6 ------
 src/client/theme-default/components/VPNavBar.vue   | 14 +++++---------
 src/client/theme-default/components/VPSidebar.vue  |  4 ++--
 4 files changed, 9 insertions(+), 19 deletions(-)

diff --git a/src/client/theme-default/components/VPContent.vue b/src/client/theme-default/components/VPContent.vue
index 8b033785..b0eb5fc8 100644
--- a/src/client/theme-default/components/VPContent.vue
+++ b/src/client/theme-default/components/VPContent.vue
@@ -88,8 +88,8 @@ const { isHome, hasSidebar } = useLayout()
 
 @media (min-width: 1440px) {
   .VPContent.has-sidebar {
-    padding-right: calc((100vw - var(--vp-layout-max-width)) / 2);
-    padding-left: calc((100vw - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width));
+    padding-right: calc((100% - var(--vp-layout-max-width)) / 2);
+    padding-left: calc((100% - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width));
   }
 }
 </style>
diff --git a/src/client/theme-default/components/VPLocalNav.vue b/src/client/theme-default/components/VPLocalNav.vue
index b950205a..f80bb361 100644
--- a/src/client/theme-default/components/VPLocalNav.vue
+++ b/src/client/theme-default/components/VPLocalNav.vue
@@ -98,12 +98,6 @@ const classes = computed(() => {
   }
 }
 
-@media (min-width: 1440px) {
-  .VPLocalNav.has-sidebar {
-    padding-left: calc((100vw - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width));
-  }
-}
-
 .container {
   display: flex;
   justify-content: space-between;
diff --git a/src/client/theme-default/components/VPNavBar.vue b/src/client/theme-default/components/VPNavBar.vue
index 6c3ca56b..527bbb3f 100644
--- a/src/client/theme-default/components/VPNavBar.vue
+++ b/src/client/theme-default/components/VPNavBar.vue
@@ -171,20 +171,14 @@ watchPostEffect(() => {
     position: relative;
     z-index: 1;
     padding-left: var(--vp-sidebar-width);
-  }
-
-  .VPNavBar.has-sidebar .content-body {
     padding-right: 32px;
   }
 }
 
 @media (min-width: 1440px) {
   .VPNavBar.has-sidebar .content {
-    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);
+    padding-left: calc((100% - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width));
+    padding-right: calc((100% - var(--vp-layout-max-width)) / 2 + 32px);
   }
 }
 
@@ -193,6 +187,8 @@ watchPostEffect(() => {
   justify-content: flex-end;
   align-items: center;
   height: var(--vp-nav-height);
+  margin-right: -100vw;
+  padding-right: 100vw;
   transition: background-color 0.5s;
 }
 
@@ -252,7 +248,7 @@ watchPostEffect(() => {
 
 @media (min-width: 1440px) {
   .VPNavBar.has-sidebar .divider {
-    padding-left: calc((100vw - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width));
+    padding-left: calc((100% - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width));
   }
 }
 
diff --git a/src/client/theme-default/components/VPSidebar.vue b/src/client/theme-default/components/VPSidebar.vue
index e20a5a0a..7e6e2528 100644
--- a/src/client/theme-default/components/VPSidebar.vue
+++ b/src/client/theme-default/components/VPSidebar.vue
@@ -111,8 +111,8 @@ watch(
 
 @media (min-width: 1440px) {
   .VPSidebar {
-    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);
+    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);
   }
 }