ceos/unsloth
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Studio: model selector and settings polish (#6240)

Browse source 
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.
This commit is contained in:
Michael Han 2026-06-12 04:13:22 -07:00 • committed by GitHub
commit 40cb0a71b4
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
9 changed files with 17 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

8
studio/frontend/src/components/assistant-ui/model-selector.tsx
View file

@ -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}

8
studio/frontend/src/features/chat/chat-settings-sheet.tsx
View file

@ -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>
)}

2
studio/frontend/src/features/chat/components/project-switcher.tsx
View file

@ -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>

2
studio/frontend/src/features/settings/settings-dialog.tsx
View file

@ -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>

2
studio/frontend/src/features/settings/tabs/about-tab.tsx
View file

@ -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">

2
studio/frontend/src/features/settings/tabs/api-keys-tab.tsx
View file

@ -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">

2
studio/frontend/src/features/settings/tabs/appearance-tab.tsx
View file

@ -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">

2
studio/frontend/src/features/settings/tabs/general-tab.tsx
View file

@ -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">

2
studio/frontend/src/features/settings/tabs/profile-tab.tsx
View file

@ -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">