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/model-pricing-sheet.tsx

@@ -839,7 +839,11 @@ export const ModelPricingEditorPanel = forwardRef<
                 )}
               />
 
-              <Tabs value={pricingMode} onValueChange={handleModeChange}>
+              <Tabs
+                value={pricingMode}
+                onValueChange={handleModeChange}
+                className='gap-4'
+              >
                 <TabsList className='grid w-full grid-cols-3'>
                   <TabsTrigger value='per-token'>{t('Per-token')}</TabsTrigger>
                   <TabsTrigger value='per-request'>
@@ -850,8 +854,8 @@ export const ModelPricingEditorPanel = forwardRef<
                   </TabsTrigger>
                 </TabsList>
 
-                <TabsContent value='per-token' className='flex flex-col gap-5'>
-                  <FieldGroup>
+                <TabsContent value='per-token' className='pt-0'>
+                  <FieldGroup className='gap-5'>
                     <Field>
                       <FieldLabel>{t('Input price')}</FieldLabel>
                       <PriceInput
@@ -892,16 +896,15 @@ export const ModelPricingEditorPanel = forwardRef<
                   </FieldGroup>
                 </TabsContent>
 
-                <TabsContent
-                  value='per-request'
-                  className='flex flex-col gap-5'
-                >
+                <TabsContent value='per-request' className='pt-0'>
+                  <FieldGroup className='gap-5'>
                     <FormField
                       control={form.control}
                       name='price'
                       render={({ field }) => (
-                      <FormItem>
-                        <FormLabel>{t('Fixed price')}</FormLabel>
+                        <FormItem className='contents'>
+                          <Field>
+                            <FieldLabel>{t('Fixed price')}</FieldLabel>
                             <FormControl>
                               <InputGroup>
                                 <InputGroupAddon>$</InputGroupAddon>
@@ -921,21 +924,21 @@ export const ModelPricingEditorPanel = forwardRef<
                                 </InputGroupAddon>
                               </InputGroup>
                             </FormControl>
-                        <FormDescription>
+                            <FieldDescription>
                               {t(
                                 'Cost in USD per request, regardless of tokens used.'
                               )}
-                        </FormDescription>
+                            </FieldDescription>
                             <FormMessage />
+                          </Field>
                         </FormItem>
                       )}
                     />
+                  </FieldGroup>
                 </TabsContent>
 
-                <TabsContent
-                  value='tiered_expr'
-                  className='flex flex-col gap-5'
-                >
+                <TabsContent value='tiered_expr' className='pt-0'>
+                  <FieldGroup className='gap-5'>
                     <TieredPricingEditor
                       modelName={watchedValues.name}
                       billingExpr={billingExpr}
@@ -943,6 +946,7 @@ export const ModelPricingEditorPanel = forwardRef<
                       onBillingExprChange={setBillingExpr}
                       onRequestRuleExprChange={setRequestRuleExpr}
                     />
+                  </FieldGroup>
                 </TabsContent>
               </Tabs>