From 7df30525121a28a46cc6c802f3155ccff8effaca Mon Sep 17 00:00:00 2001 From: Divyansh Singh <40380293+brc-dd@users.noreply.github.com> Date: Fri, 15 Aug 2025 01:30:13 +0530 Subject: [PATCH] fix(theme): nav background doesn't extend fully and gap after sidebar with non-overlay scrollbars closes #4653 Co-authored-by: Burrito --- src/client/theme-default/components/VPNavBar.vue | 10 ++++++++-- src/client/theme-default/components/VPSidebar.vue | 4 ++-- 2 files changed, 10 insertions(+), 4 deletions(-) diff --git a/src/client/theme-default/components/VPNavBar.vue b/src/client/theme-default/components/VPNavBar.vue index 1313657c..6c3ca56b 100644 --- a/src/client/theme-default/components/VPNavBar.vue +++ b/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 { diff --git a/src/client/theme-default/components/VPSidebar.vue b/src/client/theme-default/components/VPSidebar.vue index c2de0a0d..b27d8028 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((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); } }