fix(model-pricing): align pricing mode editor spacing

- add consistent tab and field spacing so each pricing mode keeps the same visual rhythm.
- wrap per-request and tiered sections in shared field groups to match the per-token form structure.
- keep fixed-price descriptions and validation messages aligned with the updated field layout.

web/default/src/features/system-settings/models/tiered-pricing-editor.tsx

@@ -40,6 +40,7 @@ import {
   CollapsibleContent,
   CollapsibleTrigger,
 } from '@/components/ui/collapsible'
+import { Field, FieldLabel } from '@/components/ui/field'
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
 import {
@@ -1309,9 +1310,7 @@ function PresetSection({ applyPreset }: PresetSectionProps) {
   return (
     <div className='space-y-2'>
       <div className='flex items-center gap-2'>
-        <span className='text-muted-foreground text-xs'>
+        <span className='text-sm font-medium'>{t('Preset templates')}</span>
-          {t('Preset templates')}
-        </span>
         {hasMore && (
           <Button
             variant='ghost'
@@ -1770,35 +1769,37 @@ export const TieredPricingEditor = memo(function TieredPricingEditor({
   }, [])
 
   return (
-    <div className='space-y-4'>
+    <div className='space-y-5'>
-      <div className='flex items-center justify-between gap-2'>
+      <div className='grid gap-3 sm:grid-cols-[minmax(0,1fr)_auto] sm:items-end'>
-        <Label className='text-xs'>{t('Editor mode')}</Label>
+        <Field className='gap-2'>
-        <Select
+          <FieldLabel>{t('Editor mode')}</FieldLabel>
-          items={[
+          <Select
-            { value: 'visual', label: t('Visual editor') },
+            items={[
-            { value: 'raw', label: t('Expression editor') },
+              { value: 'visual', label: t('Visual editor') },
-          ]}
+              { value: 'raw', label: t('Expression editor') },
-          value={editorMode}
+            ]}
-          onValueChange={(value) => handleModeChange(value as EditorMode)}
+            value={editorMode}
-        >
+            onValueChange={(value) => handleModeChange(value as EditorMode)}
-          <SelectTrigger className='w-44' size='sm'>
+          >
-            <SelectValue />
+            <SelectTrigger className='w-full sm:w-56' size='sm'>
-          </SelectTrigger>
+              <SelectValue />
-          <SelectContent alignItemWithTrigger={false}>
+            </SelectTrigger>
-            <SelectGroup>
+            <SelectContent alignItemWithTrigger={false}>
-              <SelectItem value='visual'>{t('Visual editor')}</SelectItem>
+              <SelectGroup>
-              <SelectItem value='raw'>{t('Expression editor')}</SelectItem>
+                <SelectItem value='visual'>{t('Visual editor')}</SelectItem>
-            </SelectGroup>
+                <SelectItem value='raw'>{t('Expression editor')}</SelectItem>
-          </SelectContent>
+              </SelectGroup>
-        </Select>
+            </SelectContent>
+          </Select>
+        </Field>
+        {editorMode === 'raw' && (
+          <div className='sm:pb-0.5'>
+            <LlmPromptHelper modelName={modelName} />
+          </div>
+        )}
       </div>
 
-      <div className='flex flex-wrap items-start gap-x-4 gap-y-1'>
+      <PresetSection applyPreset={applyPreset} />
-        <div className='flex-1'>
-          <PresetSection applyPreset={applyPreset} />
-        </div>
-        {editorMode === 'raw' && <LlmPromptHelper modelName={modelName} />}
-      </div>
 
       <div className='bg-muted/30 space-y-3 rounded-md border p-3'>
         {editorMode === 'visual' ? (