perf(web): stabilize model pricing table columns

- keep model pricing columns at fixed widths so headers do not collapse in narrow layouts.
- truncate long model names and pricing summaries within their cells instead of squeezing adjacent columns.

web/default/src/features/system-settings/models/model-ratio-table-columns.tsx

@@ -79,16 +79,22 @@ export function buildModelRatioColumns({
         <DataTableColumnHeader column={column} title={t('Model name')} />
       ),
       cell: ({ row }) => (
-        <div className='flex items-center gap-2 font-medium'>
-          {row.getValue('name')}
+        <div className='flex min-w-0 items-center gap-2 font-medium'>
+          <span className='min-w-0 truncate'>{row.getValue('name')}</span>
           {row.original.billingMode === 'tiered_expr' && (
-            <StatusBadge label={t('Tiered')} variant='info' copyable={false} />
+            <StatusBadge
+              label={t('Tiered')}
+              variant='info'
+              copyable={false}
+              className='shrink-0'
+            />
           )}
           {row.original.hasConflict && (
             <StatusBadge
               label={t('Conflict')}
               variant='danger'
               copyable={false}
+              className='shrink-0'
             />
           )}
         </div>
@@ -119,11 +125,11 @@ export function buildModelRatioColumns({
         <DataTableColumnHeader column={column} title={t('Price summary')} />
       ),
       cell: ({ row }) => (
-        <div className='flex min-w-[180px] flex-col gap-1'>
-          <span className='font-medium'>
+        <div className='flex min-w-0 flex-col gap-1'>
+          <span className='truncate font-medium'>
             {getPriceSummary(row.original, t)}
           </span>
-          <span className='text-muted-foreground max-w-[320px] truncate text-xs'>
+          <span className='text-muted-foreground truncate text-xs'>
             {getPriceDetail(row.original, t)}
           </span>
         </div>

web/default/src/features/system-settings/models/model-ratio-visual-editor.tsx

@@ -664,7 +664,7 @@ const ModelRatioVisualEditorComponent = forwardRef<
               table={table}
               containerClassName='min-h-0 flex-1 rounded-md'
               tableContainerClassName='h-full'
-              tableClassName='min-w-[760px] table-fixed sm:min-w-full'
+              tableClassName='min-w-[852px] table-fixed'
               tableHeaderClassName='[&_tr]:border-b-0'
               splitHeaderScrollClassName='h-full'
               bodyContainerClassName='[scrollbar-gutter:stable]'
@@ -678,10 +678,10 @@ const ModelRatioVisualEditorComponent = forwardRef<
               ]}
               colgroup={
                 <colgroup>
-                  <col className='w-8' />
-                  <col className='w-[280px] sm:w-[38%]' />
-                  <col className='w-[150px] sm:w-[18%]' />
-                  <col className='w-[260px] sm:w-[32%]' />
+                  <col className='w-9' />
+                  <col className='w-[300px]' />
+                  <col className='w-[120px]' />
+                  <col className='w-[300px]' />
                   <col className='w-24' />
                 </colgroup>
               }