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.

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>

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({
     )
   }
 
-  return (
-    <SettingsSection title={t(titleKey)}>
-      {visibleTabs.length === 1 ? (
-        renderTabContent(defaultTab)
-      ) : (
-        <Tabs defaultValue={defaultTab} className='space-y-6'>
-          <TabsList className={`grid w-full ${tabsGridClass}`}>
+  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 (
+    <>
+      {visibleTabs.length === 1 ? (
+        <SettingsSection title={t(titleKey)}>
+          {renderTabContent(defaultTab)}
+        </SettingsSection>
+      ) : (
+        <Tabs defaultValue={defaultTab} className='space-y-6'>
+          <SettingsPageTitleStatusPortal>
+            {renderTabSwitcher()}
+          </SettingsPageTitleStatusPortal>
 
+          <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>
+    </>
   )
 }