From 4dd68bad52dd962ec8fc1f8a4f0450eb77cc2d99 Mon Sep 17 00:00:00 2001
From: QuentinHsu <xuquentinyang@gmail.com>
Date: Sat, 6 Jun 2026 15:26:53 +0800
Subject: [PATCH] perf(model-pricing): move pricing tabs into page title

- place the model pricing tab switcher beside the page title instead of spanning the content area.
- keep the switcher width tied to its labels while preserving spacing around title status content.
---
 .../components/settings-page.tsx              |  2 +-
 .../models/ratio-settings-card.tsx            | 41 ++++++++++++-------
 2 files changed, 27 insertions(+), 16 deletions(-)

diff --git a/web/default/src/features/system-settings/components/settings-page.tsx b/web/default/src/features/system-settings/components/settings-page.tsx
index 98e3bf1f..9ae87b39 100644
--- a/web/default/src/features/system-settings/components/settings-page.tsx
+++ b/web/default/src/features/system-settings/components/settings-page.tsx
@@ -70,7 +70,7 @@ function SettingsPageFrame(props: SettingsPageFrameProps) {
             <span className='truncate'>{props.title}</span>
             <span
               ref={setTitleStatusContainer}
-              className='inline-flex shrink-0'
+              className='inline-flex min-w-0 shrink-0 items-center'
             />
           </span>
         </SectionPageLayout.Title>
diff --git a/web/default/src/features/system-settings/models/ratio-settings-card.tsx b/web/default/src/features/system-settings/models/ratio-settings-card.tsx
index 7b12a61f..e533cd99 100644
--- a/web/default/src/features/system-settings/models/ratio-settings-card.tsx
+++ b/web/default/src/features/system-settings/models/ratio-settings-card.tsx
@@ -26,6 +26,7 @@ import { toast } from 'sonner'
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
 import { ConfirmDialog } from '@/components/confirm-dialog'
 import { resetModelRatios } from '../api'
+import { SettingsPageTitleStatusPortal } from '../components/settings-page-context'
 import { SettingsSection } from '../components/settings-section'
 import { useUpdateOption } from '../hooks/use-update-option'
 import { GroupRatioForm } from './group-ratio-form'
@@ -439,25 +440,35 @@ export function RatioSettingsCard({
     )
   }
 
+  const renderTabSwitcher = () => (
+    <TabsList className={`grid w-fit max-w-full ${tabsGridClass}`}>
+      {visibleTabs.map((tab) => (
+        <TabsTrigger key={tab} value={tab}>
+          {t(tabLabels[tab])}
+        </TabsTrigger>
+      ))}
+    </TabsList>
+  )
+
   return (
-    <SettingsSection title={t(titleKey)}>
+    <>
       {visibleTabs.length === 1 ? (
-        renderTabContent(defaultTab)
+        <SettingsSection title={t(titleKey)}>
+          {renderTabContent(defaultTab)}
+        </SettingsSection>
       ) : (
         <Tabs defaultValue={defaultTab} className='space-y-6'>
-          <TabsList className={`grid w-full ${tabsGridClass}`}>
-            {visibleTabs.map((tab) => (
-              <TabsTrigger key={tab} value={tab}>
-                {t(tabLabels[tab])}
-              </TabsTrigger>
-            ))}
-          </TabsList>
+          <SettingsPageTitleStatusPortal>
+            {renderTabSwitcher()}
+          </SettingsPageTitleStatusPortal>
 
-          {visibleTabs.map((tab) => (
-            <TabsContent key={tab} value={tab}>
-              {renderTabContent(tab)}
-            </TabsContent>
-          ))}
+          <SettingsSection title={t(titleKey)}>
+            {visibleTabs.map((tab) => (
+              <TabsContent key={tab} value={tab}>
+                {renderTabContent(tab)}
+              </TabsContent>
+            ))}
+          </SettingsSection>
         </Tabs>
       )}
 
@@ -473,6 +484,6 @@ export function RatioSettingsCard({
         handleConfirm={handleConfirmReset}
         confirmText={t('Reset')}
       />
-    </SettingsSection>
+    </>
   )
 }