From af97019b70bb61fbd63b47f0757fbebeecd9274d Mon Sep 17 00:00:00 2001
From: maicss <maicss@foxmail.com>
Date: Mon, 16 Jun 2025 15:55:11 +0800
Subject: [PATCH] fix(components): [tabs] fix nav height for better display
 (#15600)

fix(components): [tabs] fix border UI
---
 packages/components/tabs/src/tab-nav.tsx | 46 ++++++++++++------------
 packages/theme-chalk/src/tabs.scss       |  1 +
 2 files changed, 25 insertions(+), 22 deletions(-)

diff --git a/packages/components/tabs/src/tab-nav.tsx b/packages/components/tabs/src/tab-nav.tsx
index e45336a5b9..b11a418cf0 100644
--- a/packages/components/tabs/src/tab-nav.tsx
+++ b/packages/components/tabs/src/tab-nav.tsx
@@ -369,28 +369,30 @@ const TabNav = defineComponent({
         >
           {scrollBtn}
           <div class={ns.e('nav-scroll')} ref={navScroll$}>
-            <div
-              class={[
-                ns.e('nav'),
-                ns.is(rootTabs.props.tabPosition),
-                ns.is(
-                  'stretch',
-                  props.stretch &&
-                    ['top', 'bottom'].includes(rootTabs.props.tabPosition)
-                ),
-              ]}
-              ref={nav$}
-              style={navStyle.value}
-              role="tablist"
-              onKeydown={changeTab}
-            >
-              {...[
-                !props.type ? (
-                  <TabBar ref={tabBarRef} tabs={[...props.panes]} />
-                ) : null,
-                tabs,
-              ]}
-            </div>
+            {props.panes.length > 0 ? (
+              <div
+                class={[
+                  ns.e('nav'),
+                  ns.is(rootTabs.props.tabPosition),
+                  ns.is(
+                    'stretch',
+                    props.stretch &&
+                      ['top', 'bottom'].includes(rootTabs.props.tabPosition)
+                  ),
+                ]}
+                ref={nav$}
+                style={navStyle.value}
+                role="tablist"
+                onKeydown={changeTab}
+              >
+                {...[
+                  !props.type ? (
+                    <TabBar ref={tabBarRef} tabs={[...props.panes]} />
+                  ) : null,
+                  tabs,
+                ]}
+              </div>
+            ) : null}
           </div>
         </div>
       )
diff --git a/packages/theme-chalk/src/tabs.scss b/packages/theme-chalk/src/tabs.scss
index 90857af354..26e63775ed 100644
--- a/packages/theme-chalk/src/tabs.scss
+++ b/packages/theme-chalk/src/tabs.scss
@@ -107,6 +107,7 @@
     display: flex;
     white-space: nowrap;
     position: relative;
+    height: getCssVar('tabs', 'header-height');
     transition: transform getCssVar('transition-duration');
     float: left;
     z-index: calc(#{getCssVar('index-normal')} + 1);