From 9e59ffc3d819faf1d6875de36f4ff1e934052ef4 Mon Sep 17 00:00:00 2001
From: QuentinHsu <xuquentinyang@gmail.com>
Date: Wed, 3 Jun 2026 18:27:07 +0800
Subject: [PATCH] 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.
---
 .../models/model-pricing-sheet.tsx            | 108 +++++++++---------
 1 file changed, 56 insertions(+), 52 deletions(-)

diff --git a/web/default/src/features/system-settings/models/model-pricing-sheet.tsx b/web/default/src/features/system-settings/models/model-pricing-sheet.tsx
index 9b033d9c..f35afb80 100644
--- a/web/default/src/features/system-settings/models/model-pricing-sheet.tsx
+++ b/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,57 +896,57 @@ export const ModelPricingEditorPanel = forwardRef<
                   </FieldGroup>
                 </TabsContent>
 
-                <TabsContent
-                  value='per-request'
-                  className='flex flex-col gap-5'
-                >
-                  <FormField
-                    control={form.control}
-                    name='price'
-                    render={({ field }) => (
-                      <FormItem>
-                        <FormLabel>{t('Fixed price')}</FormLabel>
-                        <FormControl>
-                          <InputGroup>
-                            <InputGroupAddon>$</InputGroupAddon>
-                            <InputGroupInput
-                              inputMode='decimal'
-                              placeholder='0.01'
-                              {...field}
-                              onChange={(event) => {
-                                const value = event.target.value
-                                if (numericDraftRegex.test(value)) {
-                                  field.onChange(value)
-                                }
-                              }}
-                            />
-                            <InputGroupAddon align='inline-end'>
-                              {t('per request')}
-                            </InputGroupAddon>
-                          </InputGroup>
-                        </FormControl>
-                        <FormDescription>
-                          {t(
-                            'Cost in USD per request, regardless of tokens used.'
-                          )}
-                        </FormDescription>
-                        <FormMessage />
-                      </FormItem>
-                    )}
-                  />
+                <TabsContent value='per-request' className='pt-0'>
+                  <FieldGroup className='gap-5'>
+                    <FormField
+                      control={form.control}
+                      name='price'
+                      render={({ field }) => (
+                        <FormItem className='contents'>
+                          <Field>
+                            <FieldLabel>{t('Fixed price')}</FieldLabel>
+                            <FormControl>
+                              <InputGroup>
+                                <InputGroupAddon>$</InputGroupAddon>
+                                <InputGroupInput
+                                  inputMode='decimal'
+                                  placeholder='0.01'
+                                  {...field}
+                                  onChange={(event) => {
+                                    const value = event.target.value
+                                    if (numericDraftRegex.test(value)) {
+                                      field.onChange(value)
+                                    }
+                                  }}
+                                />
+                                <InputGroupAddon align='inline-end'>
+                                  {t('per request')}
+                                </InputGroupAddon>
+                              </InputGroup>
+                            </FormControl>
+                            <FieldDescription>
+                              {t(
+                                'Cost in USD per request, regardless of tokens used.'
+                              )}
+                            </FieldDescription>
+                            <FormMessage />
+                          </Field>
+                        </FormItem>
+                      )}
+                    />
+                  </FieldGroup>
                 </TabsContent>
 
-                <TabsContent
-                  value='tiered_expr'
-                  className='flex flex-col gap-5'
-                >
-                  <TieredPricingEditor
-                    modelName={watchedValues.name}
-                    billingExpr={billingExpr}
-                    requestRuleExpr={requestRuleExpr}
-                    onBillingExprChange={setBillingExpr}
-                    onRequestRuleExprChange={setRequestRuleExpr}
-                  />
+                <TabsContent value='tiered_expr' className='pt-0'>
+                  <FieldGroup className='gap-5'>
+                    <TieredPricingEditor
+                      modelName={watchedValues.name}
+                      billingExpr={billingExpr}
+                      requestRuleExpr={requestRuleExpr}
+                      onBillingExprChange={setBillingExpr}
+                      onRequestRuleExprChange={setRequestRuleExpr}
+                    />
+                  </FieldGroup>
                 </TabsContent>
               </Tabs>