fix(desktop): Reveal scrollbar in settings dialog panels of desktop app (such that keyboard navigation and mice with out scroll functionality work) - #35555
Conversation
The settings dialog panels scrolled but hid their scrollbar entirely, so there was no indication content continued below the fold (e.g. the Appearance / Color scheme setting) and no thumb to drag. Route the General, Keybinds, Providers and Models panels — in both the current and new-layout dialogs — through the shared ScrollView so a thumb reveals on hover. Also make ScrollView defer to a descendant that already handled a key (e.defaultPrevented) so it no longer scrolls the panel when a focused dropdown is opened with the arrow keys.
github-actions
Bot
added
needs:compliance
|
Hey! Your PR title Please update it to start with one of:
Where See CONTRIBUTING.md for details. |
github-actions
Bot
removed
the
needs:compliance
|
Thanks for updating your PR! It now meets our contributing guidelines. 👍 |
JaapHaitsma
changed the title
|
@Hona @Brendonovich I appreciate you are very busy. And congrats on this very succesful project. Can you please have a quick look at this. It's a simple bugfix of quite an annoying bug. Keyboard navigation not working and if you don't have a scroll wheel on your mouse you cannot access all settings. |
Resolve conflicts in the two settings panels dev refactored under the
scrollbar fix:
- settings-keybinds.tsx: dev extracted the v2 panel into a separate
SettingsKeybindsV2View component behind an early return, so the old
`<Show when={props.v2}>` fork is gone. Move the ScrollView wrapper onto
the new v2 component's root and keep SettingsScroll on the remaining
legacy path.
- settings-v2/general.tsx: dev moved the appearance logic into the
extracted v2 controllers and dropped the now-unused useTheme/ColorScheme
import; keep only the ScrollView import.
Diff against dev is unchanged from the original fix: 10 files, +40/-18.
The settings dialog tabs now wrap their content in ScrollView so a thumb reveals on hover, which left .settings-v2-panel's own overflow-y/hidden- scrollbar rules redundant there — and they were the original source of the invisible scrollbar. They are not dead globally, though: the Manage Models dialog has no ScrollView and relies on that element being the scroll container, both to scroll at all and to drive its scroll-timeline top fade in index.css. So move the declarations to a .settings-v2-panel--scroll modifier and apply it there instead of deleting them. The scroll-timeline selector still matches, since the element keeps the base class. No behavior change: the five settings tabs already scrolled via ScrollView, and Manage Models keeps its bare scroller.
|
Automated PR Cleanup Thank you for contributing to opencode. Due to the high volume of PRs from users and AI agents, we periodically close older PRs using automated criteria so maintainers can focus review time on the most active and community-supported contributions. This PR was closed because it matched the following cleanup criteria:
PRs created within the last month are not affected by this cleanup. If you believe this PR was closed incorrectly, or if you are still actively working on it, please leave a comment explaining why it should be reopened. A maintainer can review and reopen it if appropriate. Thanks again for taking the time to contribute. |
1 participant
The settings dialog panels scrolled but hid their scrollbar entirely, so there was no indication content continued below the fold (e.g. the Appearance / Color scheme setting) and no thumb to drag. Route the General, Keybinds, Providers and Models panels — in both the current and new-layout dialogs — through the shared ScrollView so a thumb reveals on hover.
Also make ScrollView defer to a descendant that already handled a key (e.defaultPrevented) so it no longer scrolls the panel when a focused dropdown is opened with the arrow keys.
Issue for this PR
Closes #34108
Type of change
What does this PR do?
It introduces the same thin scrollbar that appears on hover as in other windows and dialogs in the settings. There was no indication before and with keyboard you could not scroll in the settings dialog. Also a mouse without a scroll wheel could not interact with it
How did you verify your code works?
I ran the Desktop app
Screenshots / recordings
and in the new layout
Checklist