From 3bdd891a1ca6e6494b8cf8ba092f6b880eae0e13 Mon Sep 17 00:00:00 2001
From: wuyiping0628 <1106773985@qq.com>
Date: Tue, 29 Sep 2026 18:44:36 -0700
Subject: [PATCH] fix: solve the problem of line breaks in header articles

---
 .vitepress/theme/components/CustomHeader.vue  | 5 ++++-
 .vitepress/theme/components/TabNavigation.vue | 5 +++++
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/.vitepress/theme/components/CustomHeader.vue b/.vitepress/theme/components/CustomHeader.vue
index 84b49f3..1390d9b 100644
--- a/.vitepress/theme/components/CustomHeader.vue
+++ b/.vitepress/theme/components/CustomHeader.vue
@@ -23,7 +23,6 @@
               :tabs="productTabs"
               :activeTab="activeProductTab"
               @tab-change="handleProductTabChange"
-              style="width: 980px"
             />
           </div>
         </div>
@@ -566,11 +565,13 @@ watch(
 .logo-section {
   display: flex;
   align-items: center;
+  flex-shrink: 0;
 }
 
 .product-section {
   padding-left: 48px;
   position: relative;
+  flex-shrink: 0;
 }
 
 .product-section:before {
@@ -589,6 +590,7 @@ watch(
 .logo-link {
   display: flex;
   align-items: center;
+  flex-shrink: 0;
   gap: 8px;
   text-decoration: none;
   color: var(--vp-c-text-1);
@@ -673,6 +675,7 @@ watch(
 .tools-section {
   display: flex;
   align-items: center;
+  flex-shrink: 0;
   gap: 8px;
 }
 
diff --git a/.vitepress/theme/components/TabNavigation.vue b/.vitepress/theme/components/TabNavigation.vue
index 7845926..a9e2402 100644
--- a/.vitepress/theme/components/TabNavigation.vue
+++ b/.vitepress/theme/components/TabNavigation.vue
@@ -201,15 +201,19 @@ onUnmounted(() => {
     font-size: 0.875rem;
     line-height: 40px;
     display: flex;
+    flex-shrink: 0;
 
     &-icon {
       height: 20px;
       width: 20px;
+      flex-shrink: 0;
     }
 
     &-title {
       transition: color 0.2s ease;
       user-select: none;
+      white-space: nowrap;
+      flex-shrink: 0;
     }
 
     &-underline {
@@ -270,6 +274,7 @@ onUnmounted(() => {
 }
 .product-section {
   .custom-tabs {
+    width: max-content;
     .custom-tabs__nav {
       gap: 0;
     }