From 40cb0a71b4ea59e0b54b0932860f6f1eafb58570 Mon Sep 17 00:00:00 2001
From: Michael Han <107991372+shimmyshimmer@users.noreply.github.com>
Date: Fri, 12 Jun 2026 04:13:22 -0700
Subject: [PATCH] Studio: model selector and settings polish (#6240)

Removes the empty band under Eject loaded model, centers the trigger
chevrons, moves the model reload Apply and Reset buttons above Chat
Template so they sit under the settings they apply, matches the
settings nav divider to the sidebar line, and bumps the settings tab
headings slightly.
---
 .../src/components/assistant-ui/model-selector.tsx        | 8 ++++----
 studio/frontend/src/features/chat/chat-settings-sheet.tsx | 8 ++++++--
 .../src/features/chat/components/project-switcher.tsx     | 2 +-
 studio/frontend/src/features/settings/settings-dialog.tsx | 2 +-
 studio/frontend/src/features/settings/tabs/about-tab.tsx  | 2 +-
 .../frontend/src/features/settings/tabs/api-keys-tab.tsx  | 2 +-
 .../src/features/settings/tabs/appearance-tab.tsx         | 2 +-
 .../frontend/src/features/settings/tabs/general-tab.tsx   | 2 +-
 .../frontend/src/features/settings/tabs/profile-tab.tsx   | 2 +-
 9 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/studio/frontend/src/components/assistant-ui/model-selector.tsx b/studio/frontend/src/components/assistant-ui/model-selector.tsx
index b8d1bc0f00..fa6980824f 100644
--- a/studio/frontend/src/components/assistant-ui/model-selector.tsx
+++ b/studio/frontend/src/components/assistant-ui/model-selector.tsx
@@ -189,7 +189,7 @@ function ModelSelectorTrigger({
           <HugeiconsIcon
             icon={ArrowDown01Icon}
             strokeWidth={1.75}
-            className="relative top-0.5 size-3.5 text-muted-foreground"
+            className="size-3.5 text-muted-foreground"
           />
         </span>
       </button>
@@ -247,7 +247,7 @@ function ModelSelectorContent({
       alignOffset={10}
       data-tour={dataTour}
       className={cn(
-        "unsloth-model-selector-menu menu-soft-surface ring-0 w-[min(440px,calc(100vw-1rem))] max-w-[calc(100vw-1rem)] min-w-0 gap-0 p-3",
+        "unsloth-model-selector-menu menu-soft-surface ring-0 w-[min(440px,calc(100vw-1rem))] max-w-[calc(100vw-1rem)] min-w-0 gap-0 px-3 pt-3 pb-2",
         className,
       )}
     >
@@ -307,7 +307,7 @@ function ModelSelectorContent({
       )}
 
       {onPickLocalModel ? (
-        <div className="mt-2 border-t border-border/70 pt-2">
+        <div className="mt-1.5 border-t border-border/70 pt-1.5">
           <button
             type="button"
             onClick={onPickLocalModel}
@@ -320,7 +320,7 @@ function ModelSelectorContent({
         </div>
       ) : null}
       {hasSelection && onEject ? (
-        <div className="mt-2 border-t border-border/70 pt-2">
+        <div className="mt-1.5 border-t border-border/70 pt-1.5">
           <button
             type="button"
             onClick={onEject}
diff --git a/studio/frontend/src/features/chat/chat-settings-sheet.tsx b/studio/frontend/src/features/chat/chat-settings-sheet.tsx
index 6eb59382b1..c204f85a33 100644
--- a/studio/frontend/src/features/chat/chat-settings-sheet.tsx
+++ b/studio/frontend/src/features/chat/chat-settings-sheet.tsx
@@ -1086,9 +1086,12 @@ export function ChatSettingsPanel({
                 )}
               </>
             )}
-            <ChatTemplateFields />
+            {/* Apply/Reset belongs to the model-reload settings above (context
+                length, KV cache, speculative decoding). Render it here, before
+                the Chat Template row, so it never reads as attached to Chat
+                Template (which is edited via its own dialog). */}
             {modelSettingsDirty && (
-              <div className="flex flex-wrap gap-1.5 pt-1">
+              <div className="flex flex-wrap gap-1.5">
                 <Button
                   type="button"
                   onClick={() => onReloadModel?.()}
@@ -1115,6 +1118,7 @@ export function ChatSettingsPanel({
                 </Button>
               </div>
             )}
+            <ChatTemplateFields />
           </div>
         </CollapsibleSection>
         )}
diff --git a/studio/frontend/src/features/chat/components/project-switcher.tsx b/studio/frontend/src/features/chat/components/project-switcher.tsx
index 08e252a2c2..f0ca190bd5 100644
--- a/studio/frontend/src/features/chat/components/project-switcher.tsx
+++ b/studio/frontend/src/features/chat/components/project-switcher.tsx
@@ -62,7 +62,7 @@ export function ProjectSwitcher({
             <HugeiconsIcon
               icon={ArrowDown01Icon}
               strokeWidth={1.75}
-              className="relative top-0.5 size-3.5 text-muted-foreground"
+              className="size-3.5 text-muted-foreground"
               aria-hidden={true}
             />
           </span>
diff --git a/studio/frontend/src/features/settings/settings-dialog.tsx b/studio/frontend/src/features/settings/settings-dialog.tsx
index 0d10ff722a..1e5f60ca76 100644
--- a/studio/frontend/src/features/settings/settings-dialog.tsx
+++ b/studio/frontend/src/features/settings/settings-dialog.tsx
@@ -139,7 +139,7 @@ export function SettingsDialog() {
           {t("settings.dialog.description")}
         </DialogDescription>
         <div className="flex h-full min-h-0 max-sm:flex-col">
-          <aside className="font-heading flex w-[216px] shrink-0 flex-col border-r border-border bg-muted/20 p-2 dark:border-r-0 max-sm:w-full max-sm:border-r-0 max-sm:border-b max-sm:border-border">
+          <aside className="font-heading flex w-[216px] shrink-0 flex-col border-r border-sidebar-border bg-muted/20 p-2 dark:border-r-0 max-sm:w-full max-sm:border-r-0 max-sm:border-b max-sm:border-sidebar-border">
             <h2 className="pl-3 pr-2.5 pt-3.5 pb-3.5 text-[19px] font-semibold text-foreground max-sm:hidden">
               {t("settings.dialog.title")}
             </h2>
diff --git a/studio/frontend/src/features/settings/tabs/about-tab.tsx b/studio/frontend/src/features/settings/tabs/about-tab.tsx
index 69c4aa6ef1..83ab95a99b 100644
--- a/studio/frontend/src/features/settings/tabs/about-tab.tsx
+++ b/studio/frontend/src/features/settings/tabs/about-tab.tsx
@@ -134,7 +134,7 @@ export function AboutTab() {
   return (
     <div className="flex flex-col gap-6">
       <header className="flex flex-col gap-1">
-        <h1 className="text-lg font-semibold font-heading">
+        <h1 className="text-xl font-semibold font-heading">
           {t("settings.about.title")}
         </h1>
         <p className="text-xs text-muted-foreground">
diff --git a/studio/frontend/src/features/settings/tabs/api-keys-tab.tsx b/studio/frontend/src/features/settings/tabs/api-keys-tab.tsx
index 601a81b799..d490d6b23a 100644
--- a/studio/frontend/src/features/settings/tabs/api-keys-tab.tsx
+++ b/studio/frontend/src/features/settings/tabs/api-keys-tab.tsx
@@ -86,7 +86,7 @@ export function ApiKeysTab() {
   return (
     <div className="flex min-w-0 max-w-full flex-col gap-6">
       <header className="flex min-w-0 flex-col gap-1">
-        <h1 className="text-lg font-semibold font-heading">
+        <h1 className="text-xl font-semibold font-heading">
           {t("settings.apiKeys.title")}
         </h1>
         <p className="text-xs text-muted-foreground">
diff --git a/studio/frontend/src/features/settings/tabs/appearance-tab.tsx b/studio/frontend/src/features/settings/tabs/appearance-tab.tsx
index 1214d86db2..af4f9959c8 100644
--- a/studio/frontend/src/features/settings/tabs/appearance-tab.tsx
+++ b/studio/frontend/src/features/settings/tabs/appearance-tab.tsx
@@ -15,7 +15,7 @@ export function AppearanceTab() {
   return (
     <div className="flex flex-col gap-6">
       <header className="flex flex-col gap-1">
-        <h1 className="text-lg font-semibold font-heading">
+        <h1 className="text-xl font-semibold font-heading">
           {t("settings.appearance.title")}
         </h1>
         <p className="text-xs text-muted-foreground">
diff --git a/studio/frontend/src/features/settings/tabs/general-tab.tsx b/studio/frontend/src/features/settings/tabs/general-tab.tsx
index 135f21caf5..1c3d9f7c7b 100644
--- a/studio/frontend/src/features/settings/tabs/general-tab.tsx
+++ b/studio/frontend/src/features/settings/tabs/general-tab.tsx
@@ -244,7 +244,7 @@ export function GeneralTab() {
   return (
     <div className="flex flex-col gap-6">
       <header className="flex flex-col gap-1">
-        <h1 className="text-lg font-semibold font-heading">
+        <h1 className="text-xl font-semibold font-heading">
           {t("settings.general.title")}
         </h1>
         <p className="text-xs text-muted-foreground">
diff --git a/studio/frontend/src/features/settings/tabs/profile-tab.tsx b/studio/frontend/src/features/settings/tabs/profile-tab.tsx
index 72668d5bf8..e00da414d0 100644
--- a/studio/frontend/src/features/settings/tabs/profile-tab.tsx
+++ b/studio/frontend/src/features/settings/tabs/profile-tab.tsx
@@ -10,7 +10,7 @@ export function ProfileTab() {
   return (
     <div className="flex flex-col gap-6">
       <header className="flex flex-col gap-1">
-        <h1 className="text-lg font-semibold font-heading">
+        <h1 className="text-xl font-semibold font-heading">
           {t("settings.profile.title")}
         </h1>
         <p className="text-xs text-muted-foreground">