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,9 +1769,10 @@ 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'>
+          <FieldLabel>{t('Editor mode')}</FieldLabel>
           <Select
             items={[
               { value: 'visual', label: t('Visual editor') },
@@ -1781,7 +1781,7 @@ export const TieredPricingEditor = memo(function TieredPricingEditor({
             value={editorMode}
             onValueChange={(value) => handleModeChange(value as EditorMode)}
           >
-          <SelectTrigger className='w-44' size='sm'>
+            <SelectTrigger className='w-full sm:w-56' size='sm'>
               <SelectValue />
             </SelectTrigger>
             <SelectContent alignItemWithTrigger={false}>
@@ -1791,14 +1791,15 @@ export const TieredPricingEditor = memo(function TieredPricingEditor({
               </SelectGroup>
             </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'>
-        <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' ? (