From c64ce24167056fe9b4e8bb10863d71865a159215 Mon Sep 17 00:00:00 2001
From: xjdaniel <xjdaniel@gmail.com>
Date: Fri, 14 Aug 2026 10:56:43 +0800
Subject: [PATCH] style(model-pricing): balance 5:5 layout and fix editor panel
 overlap

- split model list / pricing editor columns evenly at 5:5
- narrow the preview column in the pricing editor panel
- prevent price card grid from overflowing the scrollable area
---
 .../features/system-settings/models/model-pricing-sheet.tsx   | 4 ++--
 .../system-settings/models/model-ratio-visual-editor.tsx      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/web/src/features/system-settings/models/model-pricing-sheet.tsx b/web/src/features/system-settings/models/model-pricing-sheet.tsx
index 4c0178f9a452..95ec0835460e 100644
--- a/web/src/features/system-settings/models/model-pricing-sheet.tsx
+++ b/web/src/features/system-settings/models/model-pricing-sheet.tsx
@@ -501,7 +501,7 @@ export const ModelPricingEditorPanel = forwardRef<
           autoComplete='off'
         >
           <div className='min-h-0 flex-1 overflow-y-auto p-4 pb-6'>
-            <div className='grid items-start gap-4 xl:grid-cols-[minmax(0,1fr)_minmax(220px,260px)]'>
+            <div className='grid items-start gap-4 xl:grid-cols-[minmax(0,1.35fr)_minmax(160px,200px)]'>
               <FieldGroup>
                 {warnings.length > 0 && (
                   <Alert variant='destructive'>
@@ -570,7 +570,7 @@ export const ModelPricingEditorPanel = forwardRef<
                         </FieldDescription>
                       </Field>
 
-                      <div className='grid gap-3 sm:grid-cols-[repeat(auto-fit,minmax(400px,1fr))]'>
+                      <div className='grid gap-3 sm:grid-cols-[repeat(auto-fit,minmax(min(100%,400px),1fr))]'>
                         {laneConfigs.map((lane) => {
                           const disabled =
                             lane.key === 'audioOutput' &&
diff --git a/web/src/features/system-settings/models/model-ratio-visual-editor.tsx b/web/src/features/system-settings/models/model-ratio-visual-editor.tsx
index 5013455c9bba..790751826165 100644
--- a/web/src/features/system-settings/models/model-ratio-visual-editor.tsx
+++ b/web/src/features/system-settings/models/model-ratio-visual-editor.tsx
@@ -677,7 +677,7 @@ const ModelRatioVisualEditorComponent = forwardRef<
 
   return (
     <div className='flex flex-col gap-4'>
-      <div className='grid h-[clamp(720px,calc(100vh-12rem),900px)] min-h-0 gap-4 md:grid-cols-[minmax(300px,0.72fr)_minmax(520px,1.28fr)] xl:grid-cols-[minmax(320px,0.68fr)_minmax(640px,1.32fr)]'>
+      <div className='grid h-[clamp(720px,calc(100vh-12rem),900px)] min-h-0 gap-4 md:grid-cols-[minmax(0,1fr)_minmax(0,1fr)] xl:grid-cols-[minmax(0,1fr)_minmax(0,1fr)]'>
         <div className='flex min-h-0 min-w-0 flex-col gap-3'>
           <DataTableToolbar
             table={table}