From 55b96875b1bf7a4968b3b3144df3aca3ace31bd6 Mon Sep 17 00:00:00 2001
From: pengzhanbo <volodymyr@foxmail.com>
Date: Tue, 27 Aug 2024 10:43:16 +0800
Subject: [PATCH] fix(theme): incorrect shadow when title is too long

---
 theme/src/client/components/VPIcon.vue            | 11 +++++++++--
 theme/src/client/components/VPMenuGroup.vue       |  5 +++++
 theme/src/client/components/VPMenuLink.vue        |  6 +++++-
 theme/src/client/components/VPSidebarItem.vue     |  2 +-
 theme/src/client/components/global/VPCard.vue     |  2 +-
 theme/src/client/components/global/VPLinkCard.vue |  2 +-
 6 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/theme/src/client/components/VPIcon.vue b/theme/src/client/components/VPIcon.vue
index a85f6df8..a64b3e83 100644
--- a/theme/src/client/components/VPIcon.vue
+++ b/theme/src/client/components/VPIcon.vue
@@ -66,7 +66,9 @@ const style = computed(() => ({
 </script>
 
 <template>
-  <img v-if="type === 'link'" class="vp__img" :src="link" alt="" :style="{ height: size }">
+  <span v-if="type === 'link'" class="vp-icon-img">
+    <img :src="link" alt="" :style="{ height: size }">
+  </span>
   <span
     v-else-if="type === 'svg'"
     class="vp-icon"
@@ -82,10 +84,15 @@ const style = computed(() => ({
 </template>
 
 <style scoped>
-.vp__img {
+.vp-icon-img {
   display: inline-block;
+  width: max-content;
   height: 1em;
   margin: 0 0.3em;
   vertical-align: middle;
 }
+
+.vp-icon-img img {
+  height: 100%;
+}
 </style>
diff --git a/theme/src/client/components/VPMenuGroup.vue b/theme/src/client/components/VPMenuGroup.vue
index 70b8102b..72d84b04 100644
--- a/theme/src/client/components/VPMenuGroup.vue
+++ b/theme/src/client/components/VPMenuGroup.vue
@@ -49,4 +49,9 @@ defineProps<{
   color: var(--vp-c-text-2);
   transition: color var(--t-color);
 }
+
+.title :deep(.vp-icon),
+.title :deep(.vp-icon-img) {
+  margin-left: 0;
+}
 </style>
diff --git a/theme/src/client/components/VPMenuLink.vue b/theme/src/client/components/VPMenuLink.vue
index c55ae755..42359721 100644
--- a/theme/src/client/components/VPMenuLink.vue
+++ b/theme/src/client/components/VPMenuLink.vue
@@ -39,7 +39,6 @@ const { page } = useData()
 
 .link {
   display: block;
-  width: max-content;
   padding: 0 12px;
   font-size: 14px;
   font-weight: 500;
@@ -60,4 +59,9 @@ const { page } = useData()
 .link.active {
   color: var(--vp-c-brand-1);
 }
+
+.link :deep(.vp-icon),
+.link :deep(.vp-icon-img) {
+  margin-left: 0;
+}
 </style>
diff --git a/theme/src/client/components/VPSidebarItem.vue b/theme/src/client/components/VPSidebarItem.vue
index ca951b5f..7c2d3a4c 100644
--- a/theme/src/client/components/VPSidebarItem.vue
+++ b/theme/src/client/components/VPSidebarItem.vue
@@ -227,7 +227,7 @@ function onCaretClick() {
   transition: color var(--t-color);
 }
 
-.item :deep(.vp__img) {
+.item :deep(.vp-icon-img) {
   height: 0.9em;
   margin: 0 0.25rem 0 0;
 }
diff --git a/theme/src/client/components/global/VPCard.vue b/theme/src/client/components/global/VPCard.vue
index 0ac973bf..b0c133db 100644
--- a/theme/src/client/components/global/VPCard.vue
+++ b/theme/src/client/components/global/VPCard.vue
@@ -50,7 +50,7 @@ const icon = computed<string | { svg: string } | undefined>(() => {
 }
 
 .vp-card-wrapper :deep(.vp-icon),
-.vp-card-wrapper :deep(.vp__img) {
+.vp-card-wrapper :deep(.vp-icon-img) {
   margin: 0;
 }
 
diff --git a/theme/src/client/components/global/VPLinkCard.vue b/theme/src/client/components/global/VPLinkCard.vue
index c484c935..7a9a3ccf 100644
--- a/theme/src/client/components/global/VPLinkCard.vue
+++ b/theme/src/client/components/global/VPLinkCard.vue
@@ -76,7 +76,7 @@ defineProps<{
 }
 
 .vp-link-card .link :deep(.vp-icon),
-.vp-link-card .link :deep(.vp__img) {
+.vp-link-card .link :deep(.vp-icon-img) {
   margin: 0;
 }