fix: improve UI scaling when sidebar width is reduced (#2678) #5917
+213
−57
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
![roomote[bot]](https://avatars.githubusercontent.com/in/1546624?s=60&v=4){kind=small}
- Adjust Settings View compact mode threshold from 500px to 600px for earlier activation - Improve text truncation in mode selector dropdowns with better Tailwind classes - Enhance chat text area API config dropdown responsiveness with min-w-0 classes - Add responsive CSS utilities for narrow containers and better text overflow handling Fixes #2678
dosubot
bot
added
size:M
hannesrudolph
added
the
Issue/PR - Triage
hannesrudolph
added
PR - Needs Preliminary Review
and removed
Issue/PR - Triage
daniel-lxs
moved this from PR [Needs Prelim Review]
to PR [Changes Requested]
in Roo Code Roadmap
|
It seems like this didn't fix the issue completely 
Can you take a look? |
hannesrudolph
added
PR - Changes Requested
and removed
PR - Needs Preliminary Review
labels
- Add CSS rules to prevent checkbox squeezing with min-width and flex-shrink properties - Fix profile selection edit icon layout by wrapping buttons in flex-shrink-0 container - Add min-w-0 to flex containers to allow proper text truncation - Add responsive CSS adjustments for settings view in narrow containers - Ensure icon buttons maintain their size and don't get cut off
- Add CSS rules to prevent VSCode checkbox squeezing across all settings pages - Fix trash icon being cut off in profile selection by adjusting button spacing - Add min-width constraints to icon buttons to maintain visibility - Implement responsive CSS utilities for containers under 400px width - Add specific selectors for VSCode checkbox components to ensure proper sizing - Reduce gap between profile action buttons and add margin separation
dosubot
bot
added
size:L
|
@daniel-lxs I've addressed the issues you mentioned. Here's what I fixed: Checkbox Squeezing Issue
Profile Selection Icons Issue
Additional Improvements
The UI elements should now properly adapt to narrow sidebar widths without being squeezed or cut off. All tests are passing. |
daniel-lxs
moved this from PR [Changes Requested]
to PR [Needs Prelim Review]
in Roo Code Roadmap
hannesrudolph
added
PR - Needs Preliminary Review
and removed
PR - Changes Requested
labels
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.
Closes: #2678
This PR addresses UI scaling issues when the primary sidebar width is reduced by implementing several responsive improvements:
Key Changes:
Implementation Details:
Testing:
Manual testing performed across various sidebar widths (300px-600px range) to verify proper responsive behavior and text truncation in all affected UI components.
Important
This PR improves UI scaling for narrow sidebars by adjusting compact mode thresholds, enhancing text truncation, and adding responsive utilities across components and CSS.
SettingsViewcompact mode threshold from 500px to 600px for earlier activation.ModesViewdropdowns with Tailwind CSS classes.ChatTextAreaAPI configuration dropdown responsiveness.index.css.index.css.ResizeObserverfor responsive design inSettingsView.min-w-0classes to prevent flex item overflow inChatTextAreaandApiConfigManager.This description was created by
for 670cd67. You can customize this summary. It will automatically update as commits are pushed.