Studio: make sidebar nav hover a fully rounded pill

[shimmyshimmer]

Summary

Make the sidebar navigation hover and active highlight a fully rounded pill. The single-line rows used rounded-[14px], so the highlight read as a soft rounded rectangle; this switches them to rounded-full.

Changes

In studio/frontend/src/components/app-sidebar.tsx:

• Main nav rows (New Chat, Search, Projects, Hub, Train, Recipes, Export)
• Recents and Projects rows
• Account row at the bottom

The hover and active background comes from .sidebar-nav-btn, which is clipped to each button's radius, so the pill shape follows directly from the class change.

The multi-line training-history rows keep rounded-[14px] on purpose: they are two lines tall (h-auto flex-col), and rounded-full would round the corners too aggressively for that block.

Verification

npm run typecheck and npm run build pass, and no new lint findings are introduced.

[chatgpt-codex-connector]

Codex usage limits have been reached for code reviews. Please check with the admins of this repo to increase the limits by adding credits.
Repo admins can enable using credits for code reviews in their settings.

[gemini-code-assist]

Code Review

This pull request updates the border radius of several sidebar elements in app-sidebar.tsx from rounded-[14px] to rounded-full. The reviewer pointed out that because the base class is now rounded-full, the conditional modifier group-data-[collapsible=icon]:!rounded-full is redundant and can be safely removed in multiple places.

Important

The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.

[gemini-code-assist]

Since the base class has been changed to rounded-full, the modifier group-data-[collapsible=icon]:!rounded-full is now redundant and can be safely removed.

Suggested change

	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"
	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]:mx-auto"

[gemini-code-assist]

Since the base class has been changed to rounded-full, the modifier group-data-[collapsible=icon]:!rounded-full is now redundant and can be safely removed.

Suggested change

	className="sidebar-nav-btn !h-[44px] -my-[3px] gap-[9px] px-2 py-[3px] rounded-full group-data-[collapsible=icon]:!size-[34px] group-data-[collapsible=icon]:!rounded-full group-data-[collapsible=icon]:!p-0 group-data-[collapsible=icon]:mx-auto group-data-[collapsible=icon]:justify-center"
	className="sidebar-nav-btn !h-[44px] -my-[3px] gap-[9px] px-2 py-[3px] rounded-full group-data-[collapsible=icon]:!size-[34px] group-data-[collapsible=icon]:!p-0 group-data-[collapsible=icon]:mx-auto group-data-[collapsible=icon]:justify-center"

[shimmyshimmer]

Good catch, that is right. With the base set to rounded-full, the group-data-[collapsible=icon]:!rounded-full override resolves to the same radius, so I removed it from the two nav buttons.

I kept it on the account avatar, since the avatar's base is not rounded-full and it still needs the override to read as a circle when collapsed.

Verified the class merge with the real twMerge/clsx: with and without the override, rounded-md is dropped and the effective radius is rounded-full in both the expanded and collapsed states, so the rendering is unchanged.