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

Merge pull request #67 from unslothai/style/polish-chat-sidebar-spacing

Browse source 
style: polish chat page spacing, typography adjustment, and panel alignment
This commit is contained in:
Wasim Yousef Said 2026-02-13 11:28:56 -08:00 • committed by GitHub
commit 1f50b5b5f1
3 changed files with 15 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -258,9 +258,10 @@ export function ChatPage(): ReactElement {
}, [refresh]);
return (
<div className="h-[calc(100vh-4rem)] bg-background overflow-hidden">
<SidebarProvider
defaultOpen={true}
className="!min-h-0 h-[calc(100vh-4rem)] max-w-7xl mx-auto px-4"
className="!min-h-0 h-full max-w-7xl mx-auto px-4"
style={
{
"--sidebar-width": "14rem",
@ -327,5 +328,6 @@ export function ChatPage(): ReactElement {
onParamsChange={setInferenceParams}
/>
</SidebarProvider>
</div>
);
}

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

@ -193,18 +193,19 @@ export function ChatSettingsPanel({
className={`shrink-0 h-full overflow-hidden bg-sidebar rounded-2xl corner-squircle transition-[width] duration-200 ease-linear ${open ? "w-[17rem] border-sidebar-border" : "w-0"}`}
>
<div className="flex h-full w-[17rem] flex-col">
<div className="flex items-center gap-2 px-3 py-2">
<div className="flex items-center gap-2 px-4 py-3">
<HugeiconsIcon
icon={PencilEdit01Icon}
className="size-3.5 text-muted-foreground"
className="size-4 text-muted-foreground/70"
/>
<span className="flex-1 text-xs font-semibold uppercase tracking-wider text-muted-foreground">
Advanced Configuration
<span className="flex-1 text-base font-semibold tracking-tight">
Configuration
</span>
</div>
<div className="flex-1 overflow-y-auto px-1.5">
<div className="px-2 pb-3">
{/* mt-4 matches the Playground sidebar gap (SidebarHeader py-3 + SidebarGroup pt-1) */}
<div className="mt-4 px-2 pb-3">
<div className="flex items-center gap-2">
<Select value={activePreset} onValueChange={applyPreset}>
<SelectTrigger className="h-8 flex-1 corner-squircle text-xs">

12
studio/frontend/src/features/chat/thread-sidebar.tsx
View file

@ -99,11 +99,11 @@ export function ThreadSidebar({
return (
<>
<SidebarHeader>
<span className="text-sm font-semibold">Playground</span>
<SidebarHeader className="px-4 py-3">
<span className="text-base font-semibold tracking-tight">Playground</span>
</SidebarHeader>
<SidebarContent>
<SidebarGroup>
<SidebarGroup className="px-4 pt-1">
<SidebarGroupContent>
<SidebarMenu>
<SidebarMenuItem>
@ -121,8 +121,8 @@ export function ThreadSidebar({
</SidebarMenu>
</SidebarGroupContent>
</SidebarGroup>
<SidebarGroup className="flex-1">
<SidebarGroupLabel>Your Chats</SidebarGroupLabel>
<SidebarGroup className="flex-1 px-4">
<SidebarGroupLabel className="text-xs font-medium text-muted-foreground/80">Your Chats</SidebarGroupLabel>
<SidebarGroupContent>
<SidebarMenu>
{items.map((item) => (
@ -144,7 +144,7 @@ export function ThreadSidebar({
))}
</SidebarMenu>
{items.length === 0 && (
<p className="px-2 py-4 text-center text-xs text-muted-foreground">
<p className="px-2 py-6 text-center text-xs text-muted-foreground">
No threads yet
</p>
)}