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

Studio UI polish: search dialog shadow, model picker pills, sidebar spacing, white Hub background (#6147)

Browse source 
* Studio UI polish: search dialog shadow, picker pills, sidebar spacing, white Hub

- Chat search dialog: keep a page-bg shadow in dark mode so the dialog
  does not merge into same-color content behind it
- Model selector: hover and selected rows are fully rounded pills
- Sidebar: nudge nav items, recents and section labels 2px right and
  widen the hover pill 2px left so its side gaps match
- Hub: pure white page background in light mode and drop the ambient
  card glow that tinted the page gray

* Lighten sidebar border, widen model picker rows

- Sidebar border is #f2f2f2 in light mode
- Model picker rows extend 4px further left and right, lining up with
  the search bar

* Plus menu: restore the intended 18px corner radius

The global 14px !important dropdown radius overrode the menu's own
18px, so the plus menu and its submenus rendered squarer than designed.
Mark the menu radius !important so it wins.

* Projects: borderless import/export button; picker search border #f2f2f2

- The import/export button on the Projects page drops its outline
  border and matches the Sort by pill next to it
- The model picker search inputs use a #f2f2f2 border in light mode,
  dark mode keeps the default

* Model selector: align the popup with the trigger label

The popover lined up with the trigger button edge, 14px left of the
label text. A 10px alignOffset starts it just before the label.

* Model picker: shorten search placeholder to Search models

* Pill-shaped model trigger and panel controls; chat template edit button

- Select model trigger: rounded pill with slightly tighter horizontal
  padding
- KV cache, speculative decoding, draft N and preset controls in the
  chat settings panel are rounded pills
- Chat Template: replace the three-line preview box with an edit icon
  button next to the label; it opens the existing editor dialog

* Training overlay: borderless console, sloth attached to the box

- Drop the terminal border for the training start console
- Remove the gap between the sloth image and the console so they touch

* Settings panel: more left padding in pill controls, smaller template edit icon

- f16, Auto and draft N pills get 12px left padding, widths bumped 4px
  to keep the values from truncating
- Chat template edit icon shrinks to 14px and the Chat Template label
  also opens the editor

* Model picker: more padding inside row pills, hugeicons delete icon

- Row pills get 12px horizontal padding so text is not pressed against
  the highlight boundary
- The cached model delete button uses the hugeicons Delete02 icon
  instead of the lucide trash icon

* Address review: hub bg layering, dead shadow utilities, merged paddings

- Remove bg-background from the Hub root: the white rule lives in the
  base layer and the utility was winning the cascade, so the white
  background never applied
- Drop the inline shadow utilities on the chat search dialog: the
  chat-search-surface rules sit later in the utilities layer and
  already win, making the inline ones dead
- Merge symmetric pl/pr pairs into px on the sidebar group wrappers
This commit is contained in:
Michael Han 2026-06-10 07:28:28 -07:00 • committed by GitHub
commit fa01a02a6d
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
11 changed files with 84 additions and 53 deletions
Download patch file Download diff file Expand all files Collapse all files

6
studio/frontend/src/components/app-sidebar.tsx
View file

@ -217,7 +217,7 @@ function NavItem({
onClick={onClick}
isActive={active}
data-tour={dataTour}
className="sidebar-nav-btn h-[33px] rounded-full gap-[8.5px] px-2.5 font-medium group-data-[collapsible=icon]:!w-[32px] group-data-[collapsible=icon]:!rounded-full group-data-[collapsible=icon]:mx-auto"
className="sidebar-nav-btn h-[33px] rounded-full gap-[8.5px] pl-3 pr-2.5 font-medium group-data-[collapsible=icon]:px-2.5 group-data-[collapsible=icon]:!w-[32px] group-data-[collapsible=icon]:!rounded-full group-data-[collapsible=icon]:mx-auto"
>
<HugeiconsIcon icon={icon} strokeWidth={1.75} className="size-icon! shrink-0 group-hover/menu-button:animate-icon-pop" />
<span className="text-[14.5px] leading-[19px] tracking-nav">{label}</span>
@ -558,7 +558,7 @@ export function AppSidebar() {
: "sidebar-row-action group-hover/recent-item:opacity-100 group-hover/recent-item:pointer-events-auto focus-visible:opacity-100 focus-visible:pointer-events-auto";
const buttonClass = cn(
"sidebar-nav-btn h-[33px] cursor-pointer rounded-full pr-4 text-[14.5px] leading-[19px] tracking-nav font-medium",
variant === "project" ? "pl-[37px]" : "pl-2.5",
variant === "project" ? "pl-[39px]" : "pl-3",
variant === "project"
? "group-hover/project-chat-item:pr-8 group-has-[.sidebar-row-action[data-state=open]]/project-chat-item:pr-8"
: "group-hover/recent-item:pr-8 group-has-[.sidebar-row-action[data-state=open]]/recent-item:pr-8",
@ -966,7 +966,7 @@ export function AppSidebar() {
>
<SidebarMenuButton
isActive={isActiveRun}
className="sidebar-nav-btn h-auto flex-col items-start gap-0.5 py-[5px] rounded-full pl-2.5 pr-7 text-[14.5px] tracking-nav font-medium"
className="sidebar-nav-btn h-auto flex-col items-start gap-0.5 py-[5px] rounded-full pl-3 pr-7 text-[14.5px] tracking-nav font-medium"
onClick={() => {
setSelectedHistoryRunId(run.id);
closeMobileIfOpen();

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

@ -148,12 +148,12 @@ function ModelSelectorTrigger({
className={cn(
"unsloth-model-selector-trigger flex min-w-0 items-center gap-2 transition-colors",
variant === "outline" &&
"rounded-[10px] border border-border/60 hover:bg-[#ececec] dark:hover:bg-[#2d2e32]",
variant === "ghost" && "rounded-[10px] hover:bg-[#ececec] dark:hover:bg-[#2d2e32]",
variant === "muted" && "rounded-[10px] bg-muted hover:bg-muted/80",
size === "sm" && "h-8 px-3 text-xs",
size === "default" && "h-9 px-3.5 text-sm",
size === "lg" && "h-10 px-4 text-sm",
"rounded-full border border-border/60 hover:bg-[#ececec] dark:hover:bg-[#2d2e32]",
variant === "ghost" && "rounded-full hover:bg-[#ececec] dark:hover:bg-[#2d2e32]",
variant === "muted" && "rounded-full bg-muted hover:bg-muted/80",
size === "sm" && "h-8 px-2.5 text-xs",
size === "default" && "h-9 px-3 text-sm",
size === "lg" && "h-10 px-3.5 text-sm",
className,
)}
>
@ -244,6 +244,7 @@ function ModelSelectorContent({
return (
<PopoverContent
align="start"
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",

9
studio/frontend/src/components/assistant-ui/model-selector/model-delete-action.tsx
View file

@ -12,7 +12,8 @@ import {
AlertDialogTitle,
} from "@/components/ui/alert-dialog";
import { cn } from "@/lib/utils";
import { Trash2Icon } from "lucide-react";
import { Delete02Icon } from "@hugeicons/core-free-icons";
import { HugeiconsIcon } from "@hugeicons/react";
import { useCallback, useState, type ReactNode } from "react";
import { toast } from "@/lib/toast";
@ -77,7 +78,11 @@ export function ModelDeleteAction({
buttonClassName,
)}
>
<Trash2Icon className={cn("size-3.5", iconClassName)} />
<HugeiconsIcon
icon={Delete02Icon}
strokeWidth={1.75}
className={cn("size-3.5", iconClassName)}
/>
</button>
<AlertDialog

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

@ -146,7 +146,7 @@ function ModelRow({
type="button"
onClick={onClick}
className={cn(
"flex w-full items-center gap-2 rounded-[8px] px-2.5 py-1.5 text-left text-sm transition-colors hover:bg-[#ececec] dark:hover:bg-[#3a3d44]",
"flex w-full items-center gap-2 rounded-full px-3 py-1.5 text-left text-sm transition-colors hover:bg-[#ececec] dark:hover:bg-[#3a3d44]",
selected && "bg-[#ececec] dark:bg-[#3a3d44]",
)}
>
@ -386,7 +386,7 @@ function GgufVariantExpander({
handleVariantClick(v.quant, v.downloaded, v.size_bytes)
}
className={cn(
"flex min-w-0 flex-1 items-center justify-between gap-2 rounded-[8px] px-2.5 py-1 text-left text-sm transition-colors hover:bg-[#ececec] dark:hover:bg-[#3a3d44]",
"flex min-w-0 flex-1 items-center justify-between gap-2 rounded-full px-3 py-1 text-left text-sm transition-colors hover:bg-[#ececec] dark:hover:bg-[#3a3d44]",
)}
>
<span className="min-w-0 flex-1 truncate font-mono text-xs">
@ -887,8 +887,8 @@ export function HubModelPicker({
<Input
value={query}
onChange={(event) => setQuery(event.target.value)}
placeholder="Search Hugging Face models"
className="h-9 pl-8 pr-8"
placeholder="Search models"
className="h-9 border-[#f2f2f2] dark:border-input pl-8 pr-8"
/>
{isLoading && (
<Spinner className="pointer-events-none absolute right-2.5 top-2.5 size-4 text-muted-foreground" />
@ -896,7 +896,7 @@ export function HubModelPicker({
</div>
<div ref={scrollRef} className="max-h-64 overflow-y-auto">
<div className="p-1">
<div className="py-1">
{!cachedReady && !showHfSection ? (
<div className="flex items-center gap-2 px-5 py-3">
<Spinner className="size-3 text-muted-foreground" />
@ -1478,12 +1478,12 @@ export function LoraModelPicker({
value={query}
onChange={(event) => setQuery(event.target.value)}
placeholder="Search trained models"
className="h-9 pl-8"
className="h-9 border-[#f2f2f2] dark:border-input pl-8"
/>
</div>
<div className="max-h-64 overflow-y-auto">
<div className="p-1">
<div className="py-1">
{grouped.length === 0 ? (
<div className="px-2.5 py-2 text-xs text-muted-foreground">
No trained models found.

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

@ -54,6 +54,7 @@ import { cn } from "@/lib/utils";
import {
ArrowDown01Icon,
ArrowTurnBackwardIcon,
Edit03Icon,
InformationCircleIcon,
LayoutAlignRightIcon,
} from "@hugeicons/core-free-icons";
@ -841,7 +842,7 @@ export function ChatSettingsPanel({
animateRadius={false}
icon={ArrowDown01Icon}
iconClassName="size-3.5"
className="grid h-7 w-[60px] min-w-0 grid-cols-[minmax(0,1fr)_auto] items-center gap-1 rounded-[10px] border-transparent bg-black/[0.04] dark:bg-white/[0.05] hover:bg-black/[0.06] dark:hover:bg-white/[0.1] px-2 py-0 text-[13px]! font-medium text-nav-fg focus-visible:ring-0 focus-visible:border-transparent [&_[data-slot=select-value]]:min-w-0 [&_[data-slot=select-value]]:truncate [&>svg]:shrink-0"
className="grid h-7 w-[64px] min-w-0 grid-cols-[minmax(0,1fr)_auto] items-center gap-1 rounded-full border-transparent bg-black/[0.04] dark:bg-white/[0.05] hover:bg-black/[0.06] dark:hover:bg-white/[0.1] pl-3 pr-2 py-0 text-[13px]! font-medium text-nav-fg focus-visible:ring-0 focus-visible:border-transparent [&_[data-slot=select-value]]:min-w-0 [&_[data-slot=select-value]]:truncate [&>svg]:shrink-0"
>
<SelectValue />
</SelectTrigger>
@ -881,7 +882,7 @@ export function ChatSettingsPanel({
animateRadius={false}
icon={ArrowDown01Icon}
iconClassName="size-3.5"
className="grid h-7 w-[120px] min-w-0 grid-cols-[minmax(0,1fr)_auto] items-center gap-1 rounded-[10px] border-transparent bg-black/[0.04] dark:bg-white/[0.05] hover:bg-black/[0.06] dark:hover:bg-white/[0.1] px-2 py-0 text-[13px]! font-medium text-nav-fg focus-visible:ring-0 focus-visible:border-transparent [&_[data-slot=select-value]]:min-w-0 [&_[data-slot=select-value]]:truncate [&>svg]:shrink-0"
className="grid h-7 w-[124px] min-w-0 grid-cols-[minmax(0,1fr)_auto] items-center gap-1 rounded-full border-transparent bg-black/[0.04] dark:bg-white/[0.05] hover:bg-black/[0.06] dark:hover:bg-white/[0.1] pl-3 pr-2 py-0 text-[13px]! font-medium text-nav-fg focus-visible:ring-0 focus-visible:border-transparent [&_[data-slot=select-value]]:min-w-0 [&_[data-slot=select-value]]:truncate [&>svg]:shrink-0"
data-test-id="speculative-type-select"
>
<SelectValue />
@ -932,7 +933,7 @@ export function ChatSettingsPanel({
}}
data-test-id="spec-draft-n-max-input"
aria-label="Speculative decoding draft tokens"
className="h-7 w-[72px] rounded-[10px] border-transparent bg-black/[0.04] dark:bg-white/[0.05] hover:bg-black/[0.06] dark:hover:bg-white/[0.1] px-2 py-0 text-[13px] font-medium text-nav-fg outline-none focus-visible:ring-0"
className="h-7 w-[76px] rounded-full border-transparent bg-black/[0.04] dark:bg-white/[0.05] hover:bg-black/[0.06] dark:hover:bg-white/[0.1] pl-3 pr-2 py-0 text-[13px] font-medium text-nav-fg outline-none focus-visible:ring-0"
/>
</div>
)}
@ -1563,11 +1564,15 @@ function ChatTemplateFields() {
return (
<>
<div className="flex flex-col gap-2">
<div className="flex items-center justify-between gap-2">
<span className="text-[13px] font-medium tracking-nav text-nav-fg">
Chat Template
</span>
<div className="flex items-center justify-between gap-2">
<button
type="button"
onClick={openEditor}
className="cursor-pointer text-left text-[13px] font-medium tracking-nav text-nav-fg"
>
Chat Template
</button>
<div className="flex items-center gap-1">
{isModified && (
<Tooltip>
<TooltipPrimitive.Trigger asChild>
@ -1593,17 +1598,30 @@ function ChatTemplateFields() {
</TooltipContent>
</Tooltip>
)}
<Tooltip>
<TooltipPrimitive.Trigger asChild>
<button
type="button"
onClick={openEditor}
className="nav-icon-btn text-nav-icon-idle hover:bg-panel-surface-hover hover:text-black dark:hover:text-white"
aria-label="Edit chat template"
>
<HugeiconsIcon
icon={Edit03Icon}
strokeWidth={1.75}
className="size-3.5"
/>
</button>
</TooltipPrimitive.Trigger>
<TooltipContent
side="top"
sideOffset={6}
className="tooltip-compact"
>
Edit template
</TooltipContent>
</Tooltip>
</div>
<button
type="button"
onClick={openEditor}
aria-label="Edit chat template"
className="panel-text-surface mt-1 flex w-full h-20 overflow-hidden cursor-pointer items-start px-3.5 py-2.5 text-left text-[13px] font-medium leading-relaxed text-nav-fg corner-squircle focus-visible:outline-none focus-visible:border-ring focus-visible:ring-[1px] focus-visible:ring-ring/40"
>
<span className="block line-clamp-3 whitespace-pre-wrap break-words">
{displayValue}
</span>
</button>
</div>
<Dialog open={editorOpen} onOpenChange={setEditorOpen}>
<DialogContent

2
studio/frontend/src/features/chat/components/chat-search-dialog.tsx
View file

@ -64,7 +64,7 @@ export function ChatSearchDialog() {
<CommandDialog
open={isOpen}
onOpenChange={setOpen}
className="chat-search-surface corner-squircle top-[25%] w-[635px] max-w-[calc(100%-2rem)] gap-0 p-0 ring-0 shadow-[0_2px_8px_-2px_rgba(0,0,0,0.16)] dark:shadow-none sm:max-w-[635px]"
className="chat-search-surface corner-squircle top-[25%] w-[635px] max-w-[calc(100%-2rem)] gap-0 p-0 ring-0 sm:max-w-[635px]"
overlayClassName="bg-transparent"
>
<Command className="rounded-4xl p-0" filter={chatSearchFilter}>

7
studio/frontend/src/features/chat/projects-page.tsx
View file

@ -269,7 +269,12 @@ export function ProjectsPage() {
</div>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="outline" size="icon" title="Import / Export projects">
<Button
variant="outline"
size="icon"
title="Import / Export projects"
className="rounded-full border-none bg-muted shadow-none dark:bg-card"
>
<HugeiconsIcon icon={Download01Icon} strokeWidth={1.75} className="size-icon" />
</Button>
</DropdownMenuTrigger>

2
studio/frontend/src/features/hub/hub-page.tsx
View file

@ -675,7 +675,7 @@ export function ModelsPage() {
);
return (
<div className="hub-page flex h-full min-h-0 flex-col bg-background">
<div className="hub-page flex h-full min-h-0 flex-col">
<div className="mx-auto flex w-full max-w-[1180px] flex-1 min-h-0 flex-col gap-6 px-5 pt-8 pb-16 sm:px-9 sm:pt-10 sm:pb-24">
<ModelsHeader
cachedCount={effectiveCachedRows.length}

7
studio/frontend/src/features/hub/hub.css
View file

@ -97,9 +97,8 @@
.hub-page .elevated-card {
border: 1px solid color-mix(in srgb, var(--foreground) 5%, transparent);
border-radius: 20px;
box-shadow:
0 12px 48px -8px color-mix(in srgb, var(--foreground) 8%, transparent),
0 0 100px 20px color-mix(in srgb, var(--foreground) 3%, transparent);
/* No ambient glow: it tinted the white page gray around the card. */
box-shadow: 0 12px 48px -8px color-mix(in srgb, var(--foreground) 8%, transparent);
}
@media (min-width: 640px) {
@ -131,7 +130,7 @@
}
html:not(.dark) .hub-page {
background-color: var(--background);
background-color: #fff;
}
html:not(.dark) .hub-page > div > section .border-b,

4
studio/frontend/src/features/studio/training-start-overlay.tsx
View file

@ -311,7 +311,7 @@ export function TrainingStartOverlay({
return (
<div className="pointer-events-none absolute inset-0 z-30 flex items-center justify-center rounded-2xl bg-background/45 backdrop-blur-[1px]">
<div className="pointer-events-auto relative flex w-[860px] max-w-[calc(100%-2rem)] flex-col items-center gap-4">
<div className="pointer-events-auto relative flex w-[860px] max-w-[calc(100%-2rem)] flex-col items-center">
<img
src="/unsloth-gem.png"
alt="Unsloth Studio"
@ -358,7 +358,7 @@ export function TrainingStartOverlay({
</AlertDialogContent>
</AlertDialog>
<Terminal
className="w-full min-h-[390px] rounded-2xl px-7 py-6 text-left"
className="w-full min-h-[390px] rounded-2xl border-0 px-7 py-6 text-left"
startOnView={false}
instant={alreadyAnimated}
>

19
studio/frontend/src/index.css
View file

@ -146,7 +146,7 @@
--sidebar-primary-foreground: oklch(1 0 0);
--sidebar-accent: oklch(0.96 0.0279 166.55);
--sidebar-accent-foreground: oklch(0.2868 0.0649 159.9823);
--sidebar-border: oklch(0.92 0 0);
--sidebar-border: #f2f2f2;
--sidebar-ring: #17b88b;
--destructive-foreground: oklch(1 0 0);
--font-sans: "Inter Variable", ui-sans-serif, sans-serif, system-ui;
@ -599,7 +599,7 @@
}
.sidebar-sticky-label {
@apply rounded-none bg-sidebar pt-0 pb-[8px] pl-[18px] pr-4 text-[14px]! leading-[17px] font-medium normal-case focus-visible:ring-0! focus-visible:outline-none transition-shadow duration-150;
@apply rounded-none bg-sidebar pt-0 pb-[8px] pl-[20px] pr-4 text-[14px]! leading-[17px] font-medium normal-case focus-visible:ring-0! focus-visible:outline-none transition-shadow duration-150;
/* Muted section-header gray, matching Gemini's "Notebooks"/"Recents".
Lightened from #5f6368 so the label reads as a header, clearly
lighter than the near-black nav items. */
@ -621,7 +621,7 @@
prompt button, and the chat-template textarea so all three read
as one quiet gray family, matching the focused-edit-number tint. */
.panel-input-group {
@apply !h-9 min-h-9 min-w-0 items-stretch gap-0 rounded-[14px] pr-0 transition-colors focus-within:ring-0 focus-within:shadow-none;
@apply !h-9 min-h-9 min-w-0 items-stretch gap-0 rounded-full pr-0 transition-colors focus-within:ring-0 focus-within:shadow-none;
border: 0 !important;
background-color: var(--panel-input-surface);
}
@ -904,12 +904,14 @@
/* Pin to the dark --radius so the corners are the same (less round) in
both themes; rounded-4xl here and on the inner Command follow this. */
--radius: 0.625rem;
/* Match the chat box: soft elevation in light, none in dark. */
/* Match the chat box: soft elevation. */
box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.16);
}
/* Dark: page-bg shadow so the dialog does not merge into same-color
content behind it (same convention as the dropdowns). */
.dark .chat-search-surface {
box-shadow: none;
box-shadow: 0 4px 14px var(--background);
}
.menu-soft-surface,
@ -1255,8 +1257,9 @@
/* Soft elevation; [data-slot] outranks the component ring-1, dropping the border. */
.unsloth-plus-menu[data-slot] {
/* Pin radius so dark matches light (rounded-lg resolves smaller in dark). */
border-radius: 18px;
/* Pin radius so dark matches light (rounded-lg resolves smaller in dark).
!important beats the global 14px dropdown radius. */
border-radius: 18px !important;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.16);
@ -1265,7 +1268,7 @@
/* MCP menu is wider (232px), so nudge the radius up so it reads as round as
the narrower + menu (18 * 232/212 ~= 20px). */
.unsloth-plus-menu.mcp-menu[data-slot] {
border-radius: 20px;
border-radius: 20px !important;
}
.dark .unsloth-plus-menu[data-slot] {