From 43b36c0c19c2b4696f8c38fdaf4318786ea7ae8e Mon Sep 17 00:00:00 2001
From: Divyansh Singh <40380293+brc-dd@users.noreply.github.com>
Date: Mon, 18 Aug 2025 00:56:32 +0530
Subject: [PATCH] fix(theme): fix local nav alignment and increase touch area

---
 .../theme-default/components/VPLocalNav.vue       | 15 +++++----------
 .../components/VPLocalNavOutlineDropdown.vue      | 10 ----------
 2 files changed, 5 insertions(+), 20 deletions(-)

diff --git a/src/client/theme-default/components/VPLocalNav.vue b/src/client/theme-default/components/VPLocalNav.vue
index e14db10e..b950205a 100644
--- a/src/client/theme-default/components/VPLocalNav.vue
+++ b/src/client/theme-default/components/VPLocalNav.vue
@@ -32,7 +32,7 @@ const classes = computed(() => {
     VPLocalNav: true,
     'has-sidebar': hasSidebar.value,
     empty: !hasLocalNav.value,
-    fixed: !hasLocalNav.value && !hasSidebar.value,
+    fixed: !hasLocalNav.value && !hasSidebar.value
   }
 })
 </script>
@@ -113,7 +113,6 @@ const classes = computed(() => {
 .menu {
   display: flex;
   align-items: center;
-  padding: 12px 24px 11px;
   line-height: 24px;
   font-size: 12px;
   font-weight: 500;
@@ -126,12 +125,6 @@ const classes = computed(() => {
   transition: color 0.25s;
 }
 
-@media (min-width: 768px) {
-  .menu {
-    padding: 0 32px;
-  }
-}
-
 @media (min-width: 960px) {
   .menu {
     display: none;
@@ -143,12 +136,14 @@ const classes = computed(() => {
   font-size: 14px;
 }
 
-.VPOutlineDropdown {
+.menu,
+:deep(.VPLocalNavOutlineDropdown > button) {
   padding: 12px 24px 11px;
 }
 
 @media (min-width: 768px) {
-  .VPOutlineDropdown {
+  .menu,
+  :deep(.VPLocalNavOutlineDropdown > button) {
     padding: 12px 32px 11px;
   }
 }
diff --git a/src/client/theme-default/components/VPLocalNavOutlineDropdown.vue b/src/client/theme-default/components/VPLocalNavOutlineDropdown.vue
index 83a17b31..cf842baa 100644
--- a/src/client/theme-default/components/VPLocalNavOutlineDropdown.vue
+++ b/src/client/theme-default/components/VPLocalNavOutlineDropdown.vue
@@ -92,16 +92,6 @@ function scrollToTop() {
 </template>
 
 <style scoped>
-.VPLocalNavOutlineDropdown {
-  padding: 12px 20px 11px;
-}
-
-@media (min-width: 960px) {
-  .VPLocalNavOutlineDropdown {
-    padding: 12px 36px 11px;
-  }
-}
-
 .VPLocalNavOutlineDropdown button {
   display: block;
   font-size: 12px;