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

Studio: tighten the sidebar pill right inset (#7562)

Browse source 
The nav pills sat at pl-1.5 pr-2, so the gap to the right edge was 8px
against 6px on the left and read as visibly lopsided.

Drops the right inset to pr-1.75 (7px), leaving a 1px difference that no
longer catches the eye. Applied to all six pill containers so every pill
keeps the same width.
This commit is contained in:
Michael Han 2026-07-28 22:17:05 -07:00 • committed by GitHub
commit 5e36548977
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 7 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1327,10 +1327,10 @@ export function AppSidebar() {
)}
</SidebarHeader>
{/* Uniform pl-1.5 pr-2 keeps every hover pill the same width, inset from the edge. */}
{/* Uniform pl-1.5 pr-1.75 keeps every hover pill the same width, inset from the edge. */}
<SidebarGroup
className={cn(
"group-data-[collapsible=icon]:px-0 pl-1.5 pr-2 shrink-0 transition-[padding]",
"group-data-[collapsible=icon]:px-0 pl-1.5 pr-1.75 shrink-0 transition-[padding]",
showCompactMacBrand ? "pt-0" : "pt-[9px]",
// Scrolled: New Chat is pinned, give a little gap below it.
scrolled ? "pb-[5px]" : "pb-px",
@ -1419,7 +1419,7 @@ export function AppSidebar() {
scrolled && "is-scrolled",
)}
>
<SidebarGroup className="group-data-[collapsible=icon]:px-0 pl-1.5 pr-2 py-0 shrink-0">
<SidebarGroup className="group-data-[collapsible=icon]:px-0 pl-1.5 pr-1.75 py-0 shrink-0">
<SidebarGroupContent>
<SidebarMenu>
<NavItem
@ -1501,7 +1501,7 @@ export function AppSidebar() {
</CollapsibleTrigger>
</SidebarGroupLabel>
<CollapsibleContent>
<SidebarGroupContent className="pl-1.5 pr-2">
<SidebarGroupContent className="pl-1.5 pr-1.75">
<SidebarMenu>
<NavItem
icon={TestTubeOutlineIcon}
@ -1576,7 +1576,7 @@ export function AppSidebar() {
</CollapsibleTrigger>
</SidebarGroupLabel>
<CollapsibleContent>
<SidebarGroupContent className="pl-1.5 pr-2">
<SidebarGroupContent className="pl-1.5 pr-1.75">
<SidebarMenu>
{pinnedProjectRecords.map((project) => {
const projectChats =
@ -1723,7 +1723,7 @@ export function AppSidebar() {
</CollapsibleTrigger>
</SidebarGroupLabel>
<CollapsibleContent>
<SidebarGroupContent className="pl-1.5 pr-2">
<SidebarGroupContent className="pl-1.5 pr-1.75">
<SidebarMenu>
{recentChatItems.map((item) =>
renderChatSidebarItem(item, "recent"),
@ -1755,7 +1755,7 @@ export function AppSidebar() {
</CollapsibleTrigger>
</SidebarGroupLabel>
<CollapsibleContent>
<SidebarGroupContent className="pl-1.5 pr-2">
<SidebarGroupContent className="pl-1.5 pr-1.75">
<SidebarMenu>
{runItems.map((run) => {
// Explicit selection wins. Otherwise highlight the active