From 04b4483d7d8b388675b5445c3250d5dae2cd3af7 Mon Sep 17 00:00:00 2001
From: yyhhyyyyyy <yyhhyyyyyy8@gmail.com>
Date: Tue, 19 May 2026 16:14:08 +0800
Subject: [PATCH] fix(web): normalize model detail tabs layout (#4938)

---
 web/default/src/features/dashboard/index.tsx                | 2 +-
 web/default/src/features/models/index.tsx                   | 2 +-
 .../src/features/pricing/components/model-details.tsx       | 6 +++---
 .../features/profile/components/profile-settings-card.tsx   | 2 +-
 web/default/src/features/usage-logs/index.tsx               | 2 +-
 5 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/web/default/src/features/dashboard/index.tsx b/web/default/src/features/dashboard/index.tsx
index 399221b0..4e300be2 100644
--- a/web/default/src/features/dashboard/index.tsx
+++ b/web/default/src/features/dashboard/index.tsx
@@ -236,7 +236,7 @@ export function Dashboard() {
             <div className='flex flex-wrap items-center justify-between gap-1.5 sm:gap-2'>
               {showSectionTabs ? (
                 <Tabs value={activeSection} onValueChange={handleSectionChange}>
-                  <TabsList className='h-auto max-w-full flex-wrap justify-start'>
+                  <TabsList className='group-data-horizontal/tabs:h-auto max-w-full flex-wrap justify-start'>
                     {visibleSections.map((section) => (
                       <TabsTrigger key={section} value={section}>
                         {t(SECTION_META[section].titleKey)}
diff --git a/web/default/src/features/models/index.tsx b/web/default/src/features/models/index.tsx
index e0f179a2..202005bb 100644
--- a/web/default/src/features/models/index.tsx
+++ b/web/default/src/features/models/index.tsx
@@ -142,7 +142,7 @@ function ModelsContent() {
         <SectionPageLayout.Content>
           <div className='space-y-4'>
             <Tabs value={activeSection} onValueChange={handleSectionChange}>
-              <TabsList className='h-auto max-w-full flex-wrap justify-start'>
+              <TabsList className='group-data-horizontal/tabs:h-auto max-w-full flex-wrap justify-start'>
                 {MODELS_SECTION_IDS.map((section) => (
                   <TabsTrigger key={section} value={section}>
                     {t(SECTION_META[section].titleKey)}
diff --git a/web/default/src/features/pricing/components/model-details.tsx b/web/default/src/features/pricing/components/model-details.tsx
index 2746b221..123ddbeb 100644
--- a/web/default/src/features/pricing/components/model-details.tsx
+++ b/web/default/src/features/pricing/components/model-details.tsx
@@ -920,17 +920,17 @@ export function ModelDetailsContent(props: ModelDetailsContentProps) {
       <ModelHeader model={props.model} />
 
       <Tabs defaultValue='overview' className='gap-4'>
-        <TabsList className='bg-muted/60 h-auto w-full justify-start gap-1 overflow-x-auto rounded-lg p-1'>
+        <TabsList className='bg-muted/60 grid w-full grid-cols-3 gap-1 rounded-lg p-1 group-data-horizontal/tabs:h-auto'>
           {TAB_VALUES.map((value) => {
             const Icon = TAB_META[value].icon
             return (
               <TabsTrigger
                 key={value}
                 value={value}
-                className='h-8 gap-1.5 rounded-md px-3 text-xs sm:text-sm'
+                className='h-8 min-w-0 gap-1.5 rounded-md px-3 text-xs sm:text-sm'
               >
                 <Icon className='size-3.5' />
-                <span>{t(TAB_META[value].labelKey)}</span>
+                <span className='truncate'>{t(TAB_META[value].labelKey)}</span>
               </TabsTrigger>
             )
           })}
diff --git a/web/default/src/features/profile/components/profile-settings-card.tsx b/web/default/src/features/profile/components/profile-settings-card.tsx
index 1d5eae4c..160386b1 100644
--- a/web/default/src/features/profile/components/profile-settings-card.tsx
+++ b/web/default/src/features/profile/components/profile-settings-card.tsx
@@ -69,7 +69,7 @@ export function ProfileSettingsCard({
       icon={<Settings className='h-4 w-4' />}
     >
       <Tabs value={activeTab} onValueChange={setActiveTab}>
-        <TabsList className='grid h-10 w-full grid-cols-2 items-stretch gap-1 rounded-xl p-1'>
+        <TabsList className='grid group-data-horizontal/tabs:h-10 w-full grid-cols-2 items-stretch gap-1 rounded-xl p-1'>
           <TabsTrigger
             value='bindings'
             className='h-full gap-2 rounded-lg px-3 py-0 leading-none'
diff --git a/web/default/src/features/usage-logs/index.tsx b/web/default/src/features/usage-logs/index.tsx
index 4561f532..a975c78d 100644
--- a/web/default/src/features/usage-logs/index.tsx
+++ b/web/default/src/features/usage-logs/index.tsx
@@ -127,7 +127,7 @@ function UsageLogsContent() {
           <div className='space-y-4'>
             {showTaskSwitcher && (
               <Tabs value={activeCategory} onValueChange={handleSectionChange}>
-                <TabsList className='h-auto max-w-full flex-wrap justify-start'>
+                <TabsList className='group-data-horizontal/tabs:h-auto max-w-full flex-wrap justify-start'>
                   {visibleSections.map((section) => (
                     <TabsTrigger key={section} value={section}>
                       {t(SECTION_META[section].titleKey)}