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}