From b4588b47f1dcc8a38a362ef3c2615d72f8511b44 Mon Sep 17 00:00:00 2001
From: ducheng1 <51262427+ducheng1@users.noreply.github.com>
Date: Wed, 8 Jul 2026 18:53:48 +0800
Subject: [PATCH] fix(ui): align LightTooltip arrow surface

---
 .../src/components/sidebar/TreeItem.vue       |  2 +-
 .../src/components/ui/LightTooltip.vue        | 20 ++++++++++++-------
 2 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/apps/desktop/src/components/sidebar/TreeItem.vue b/apps/desktop/src/components/sidebar/TreeItem.vue
index 0a726360a..d7759768d 100644
--- a/apps/desktop/src/components/sidebar/TreeItem.vue
+++ b/apps/desktop/src/components/sidebar/TreeItem.vue
@@ -5066,7 +5066,7 @@ function treeItemMenuItems(): ContextMenuItem[] {
 
   <CustomContextMenu v-else :items="treeItemMenuItems()" v-slot="contextMenuSlot">
     <div @contextmenu="onTreeItemContextMenu($event, contextMenuSlot.onContextMenu)">
-      <LightTooltip :text="displayLabel(node)" :disabled="isTooltipDisabled()" side="right" :side-offset="8" :delay="0" :close-delay="0">
+      <LightTooltip :text="displayLabel(node)" :disabled="isTooltipDisabled()" side="right" :side-offset="8" :delay="0" :close-delay="0" :surface="detailTooltip ? 'popover' : 'foreground'">
         <div
           ref="rowRef"
           class="group flex items-center gap-1.5 py-1 px-2 cursor-pointer relative outline-none"
diff --git a/apps/desktop/src/components/ui/LightTooltip.vue b/apps/desktop/src/components/ui/LightTooltip.vue
index 9ce65eced..dd8510ee3 100644
--- a/apps/desktop/src/components/ui/LightTooltip.vue
+++ b/apps/desktop/src/components/ui/LightTooltip.vue
@@ -11,6 +11,7 @@ const props = withDefaults(
     closeDelay?: number;
     openOnFocus?: boolean;
     nowrap?: boolean;
+    surface?: "foreground" | "popover";
   }>(),
   {
     disabled: false,
@@ -20,6 +21,7 @@ const props = withDefaults(
     closeDelay: 100,
     openOnFocus: true,
     nowrap: false,
+    surface: "foreground",
   },
 );
 
@@ -62,17 +64,21 @@ const tooltipTransformClass = computed(() => {
 const arrowClass = computed(() => {
   switch (props.side) {
     case "right":
-      return "absolute -left-1 top-1/2 -translate-y-1/2";
+      return "absolute -left-1.25 top-1/2 -translate-y-1/2 border-b border-l";
     case "left":
-      return "absolute -right-1 top-1/2 -translate-y-1/2";
+      return "absolute -right-1.25 top-1/2 -translate-y-1/2 border-t border-r";
     case "bottom":
-      return "absolute -top-1 left-1/2 -translate-x-1/2";
+      return "absolute -top-1.25 left-1/2 -translate-x-1/2 border-t border-l";
     case "top":
     default:
-      return "absolute -bottom-1 left-1/2 -translate-x-1/2";
+      return "absolute -bottom-1.25 left-1/2 -translate-x-1/2 border-b border-r";
   }
 });
 
+const tooltipSurfaceClass = computed(() => (props.surface === "popover" ? "bg-popover text-popover-foreground" : "bg-foreground text-background"));
+
+const arrowSurfaceClass = computed(() => (props.surface === "popover" ? "bg-popover border-border" : "bg-foreground border-foreground"));
+
 function clearTimer() {
   if (!timer) return;
   clearTimeout(timer);
@@ -241,15 +247,15 @@ watch(
     <div
       v-if="show"
       ref="tooltipRef"
-      class="fixed z-50 rounded-md bg-foreground text-xs text-background"
-      :class="[slots.content ? '' : ['inline-flex w-fit max-w-xs items-center gap-1.5 px-3 py-1.5', nowrap ? 'whitespace-nowrap' : ''], tooltipTransformClass]"
+      class="fixed z-50 rounded-md text-xs"
+      :class="[tooltipSurfaceClass, slots.content ? '' : ['inline-flex w-fit max-w-xs items-center gap-1.5 px-3 py-1.5', nowrap ? 'whitespace-nowrap' : ''], tooltipTransformClass]"
       :style="{ left: `${x}px`, top: `${y}px` }"
       role="tooltip"
       @mouseenter="clearCloseTimer"
       @mouseleave="scheduleClose"
     >
       <slot name="content">{{ text }}</slot>
-      <span :class="[arrowClass, 'size-2.5 rotate-45 rounded-[2px] bg-foreground']" aria-hidden="true" />
+      <span :class="[arrowClass, arrowSurfaceClass, 'size-2.5 rotate-45 rounded-[2px]']" aria-hidden="true" />
     </div>
   </Teleport>
 </template>