Skip to content

fix sidebar emphasis and model picker overflow#149

Merged
tulsi-builder merged 1 commit intomainfrom
tulsi/sidebar-text
Apr 10, 2026
Merged

fix sidebar emphasis and model picker overflow#149
tulsi-builder merged 1 commit intomainfrom
tulsi/sidebar-text

Conversation

@tulsi-builder
Copy link
Copy Markdown
Collaborator

Category: fix
User Impact: Users can more easily read sidebar items, and long provider model lists now stay contained and scroll correctly inside the picker.
Problem: The sidebar's gray labels were reading as disabled, which made navigation and project/session lists feel less legible. Separately, long Goose provider model lists could expand past the picker bounds and lose scrolling, causing the modal to visually spill over nearby UI.
Solution: This change lifts sidebar muted text to the existing subtle text token and gives selected rows a slightly stronger weight so active state still reads clearly. It also constrains the agent/model picker columns to the popover height, clips overflow at the shared scroll area, and adds a regression test for long model names.

File changes

src/features/chat/ui/AgentModelPicker.tsx
Constrained the two-column picker layout so long model names stay within the popover and the model column scrolls instead of expanding past the modal. The row content now truncates cleanly within each constrained column.

src/features/chat/ui/tests/AgentModelPicker.test.tsx
Added coverage for long model names so the picker keeps constrained rows instead of regressing back to overflow-prone layout behavior.

src/features/sidebar/ui/Sidebar.tsx
Scoped the sidebar to use the existing subtle text token for muted copy and strengthened the selected top-level nav state so readability improved without changing the rest of the app.

src/features/sidebar/ui/SidebarChatRow.tsx
Made active chat rows slightly heavier so the current session remains visually distinct after the muted text contrast bump.

src/features/sidebar/ui/SidebarProjectsSection.tsx
Applied the same selected-state weight treatment to active project rows for consistency with the rest of the sidebar.

src/shared/ui/scroll-area.tsx
Clipped overflow at the shared scroll area root so picker content stays inside its bounds and Radix scrolling can take over correctly.

  1. Open the app and look at the left sidebar.
  2. Verify secondary labels like Personas, Skills, Session History, project names, and recent chats read more clearly, while the selected item still stands out.
  3. Open the agent/model picker for Goose and expand a provider with many long model names, such as OpenAI.
  4. Verify the model list stays inside the popover, long rows truncate instead of spilling past the modal, and the column scrolls when the list is taller than the popover.

Screenshots/Demos

Validated against local before/after screenshots while tuning the sidebar contrast and the overflowing model picker behavior.

@tulsi-builder tulsi-builder merged commit d006f4e into main Apr 10, 2026
8 checks passed
@tulsi-builder tulsi-builder deleted the tulsi/sidebar-text branch April 10, 2026 17:15
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant