From 4a1aa24dc87ef71722b32a47fe1f87f73efe78f8 Mon Sep 17 00:00:00 2001
From: t8y2 <1156263951@qq.com>
Date: Thu, 21 May 2026 17:47:48 +0800
Subject: [PATCH] fix(desktop): improve tab bar spacing and divider contrast

---
 apps/desktop/src/components/layout/AppTabBar.vue | 8 +++++---
 packages/app-tests/appTabBarDataTabsMenu.test.ts | 5 ++++-
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/apps/desktop/src/components/layout/AppTabBar.vue b/apps/desktop/src/components/layout/AppTabBar.vue
index ef6c6181c8..452185f11f 100644
--- a/apps/desktop/src/components/layout/AppTabBar.vue
+++ b/apps/desktop/src/components/layout/AppTabBar.vue
@@ -175,16 +175,18 @@ const dataTabsMenuContainerClass = computed(() =>
           <Tooltip>
             <TooltipTrigger as-child>
               <div
-                class="group flex min-w-38 items-center gap-1 px-2 text-xs cursor-pointer transition-colors whitespace-nowrap"
+                class="group flex items-center gap-1 px-2 text-xs cursor-pointer transition-colors whitespace-nowrap"
                 :class="
                   settingsStore.editorSettings.appLayout === 'classic'
                     ? [
-                        'h-full border-r border-border/50',
+                        compactTabTitle ? 'min-w-24' : 'min-w-38',
+                        'h-full border-r border-border/80 dark:border-border/45',
                         tab.id === queryStore.activeTabId && !showDriverStore
                           ? 'bg-background text-foreground font-medium'
                           : 'text-foreground/70 hover:text-foreground/90',
                       ]
                     : [
+                        compactTabTitle ? 'min-w-24' : 'min-w-38',
                         'h-7 rounded-md border',
                         tab.id === queryStore.activeTabId && !showDriverStore
                           ? 'text-foreground font-medium'
@@ -267,7 +269,7 @@ const dataTabsMenuContainerClass = computed(() =>
         class="group flex min-w-38 items-center gap-1 px-2 text-xs cursor-pointer transition-colors whitespace-nowrap"
         :class="
           settingsStore.editorSettings.appLayout === 'classic'
-            ? ['h-full border-r border-border/50 bg-background text-foreground font-medium']
+            ? ['h-full border-r border-border/80 dark:border-border/45 bg-background text-foreground font-medium']
             : ['h-7 rounded-md border text-foreground font-medium', 'border-ring']
         "
         :style="
diff --git a/packages/app-tests/appTabBarDataTabsMenu.test.ts b/packages/app-tests/appTabBarDataTabsMenu.test.ts
index 842022a7a3..fab3f8bda8 100644
--- a/packages/app-tests/appTabBarDataTabsMenu.test.ts
+++ b/packages/app-tests/appTabBarDataTabsMenu.test.ts
@@ -6,7 +6,10 @@ test("tab bar exposes a data-table-only dropdown switcher", () => {
   const source = readFileSync("apps/desktop/src/components/layout/AppTabBar.vue", "utf8");
 
   assert.match(source, /tab\.mode === "data"/);
-  assert.match(source, /showPinnedDataTabsMenu = computed\(\(\) => dataTabs\.value\.length > 0 && \(canScrollLeft\.value \|\| canScrollRight\.value\)\)/);
+  assert.match(
+    source,
+    /showPinnedDataTabsMenu = computed\(\s*\(\) => dataTabs\.value\.length > 0 && \(canScrollLeft\.value \|\| canScrollRight\.value\),?\s*\)/,
+  );
   assert.match(source, /const dataTabsMenuContainerClass = computed\(\(\) =>/);
   assert.match(source, /<div v-if="showPinnedDataTabsMenu" :class="dataTabsMenuContainerClass">/);
   assert.match(source, /t\(['"]tabs\.openDataTabs['"]\)/);