From 78c40ed6a760ca4cd2b352866390381c8fd0d64d Mon Sep 17 00:00:00 2001
From: moe-berri <moe@berri.ai>
Date: Thu, 3 Sep 2026 19:30:04 -0700
Subject: [PATCH] style(ui): compact Auto Setup control

---
 .../add_model/add_auto_router_tab.tsx           | 17 ++++++++---------
 .../src/components/add_model/auto_setup.test.ts |  7 ++++---
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/add_model/add_auto_router_tab.tsx b/ui/litellm-dashboard/src/components/add_model/add_auto_router_tab.tsx
index 2dfb8864faa..f1f6cbd3246 100644
--- a/ui/litellm-dashboard/src/components/add_model/add_auto_router_tab.tsx
+++ b/ui/litellm-dashboard/src/components/add_model/add_auto_router_tab.tsx
@@ -527,15 +527,14 @@ const AddAutoRouterTab: React.FC<AddAutoRouterTabProps> = ({
               </FormField>
 
               {!automaticSetupLoading && automaticRouterConfig && (
-                <div className="flex items-center justify-between gap-4 rounded-lg border border-border p-4">
-                  <div>
-                    <div className="text-sm font-medium text-foreground">Start with a recommended setup</div>
-                    <div className="text-xs text-muted-foreground">
-                      Uses your available models and our recommended setups. You can review and edit everything before
-                      saving.
-                    </div>
-                  </div>
-                  <Button type="button" data-testid="configure-automatically-button" onClick={handleAutomaticSetup}>
+                <div className="flex justify-end">
+                  <Button
+                    type="button"
+                    size="sm"
+                    variant="outline"
+                    data-testid="configure-automatically-button"
+                    onClick={handleAutomaticSetup}
+                  >
                     Configure automatically
                   </Button>
                 </div>
diff --git a/ui/litellm-dashboard/src/components/add_model/auto_setup.test.ts b/ui/litellm-dashboard/src/components/add_model/auto_setup.test.ts
index 3722086eaae..2b63103ee3a 100644
--- a/ui/litellm-dashboard/src/components/add_model/auto_setup.test.ts
+++ b/ui/litellm-dashboard/src/components/add_model/auto_setup.test.ts
@@ -16,13 +16,14 @@ describe("buildPreferredTierModels", () => {
     const available = ["gpt-4o-mini", "claude-sonnet-4-5", "grok-4", "deepseek-reasoner"];
     const availability = buildModelAvailability(available, []);
     const preferred = buildPreferredTierModels([], availability);
-
-    expect(preferred).toEqual({
+    const expected: PreferredTierModels = {
       SIMPLE: ["gpt-4o-mini"],
       MEDIUM: ["claude-sonnet-4-5"],
       COMPLEX: ["grok-4"],
       REASONING: ["deepseek-reasoner"],
-    });
+    };
+
+    expect(preferred).toEqual(expected);
   });
 });