fix sidebar emphasis and model picker overflow#149
Merged
tulsi-builder merged 1 commit intomainfrom Apr 10, 2026
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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.
Screenshots/Demos
Validated against local before/after screenshots while tuning the sidebar contrast and the overflowing model picker behavior.