scriptoriumadmin/Roo-Code
1
0
Fork 0
mirror of https://github.com/RooVetGit/Roo-Code.git synced 2026-09-06 08:18:39 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix: improve UI responsiveness for narrow sidebar widths

Browse source 
- 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
This commit is contained in:
MuriloFP 2025-07-24 17:03:44 -03:00
parent aaec180122
commit 670cd6778c
2 changed files with 49 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
webview-ui/src/components/settings/ApiConfigManager.tsx
View file

@ -250,14 +250,14 @@ const ApiConfigManager = ({
className="grow min-w-0"
data-testid="select-component"
/>
<div className="flex items-center gap-1 flex-shrink-0">
<div className="flex items-center gap-0.5 flex-shrink-0 ml-1">
<StandardTooltip content={t("settings:providers.addProfile")}>
<Button
variant="ghost"
size="icon"
onClick={handleAdd}
data-testid="add-profile-button"
className="flex-shrink-0">
className="flex-shrink-0 min-w-[32px]">
<span className="codicon codicon-add" />
</Button>
</StandardTooltip>
@ -269,7 +269,7 @@ const ApiConfigManager = ({
size="icon"
onClick={handleStartRename}
data-testid="rename-profile-button"
className="flex-shrink-0">
className="flex-shrink-0 min-w-[32px]">
<span className="codicon codicon-edit" />
</Button>
</StandardTooltip>
@ -285,7 +285,7 @@ const ApiConfigManager = ({
onClick={handleDelete}
data-testid="delete-profile-button"
disabled={isOnlyProfile}
className="flex-shrink-0">
className="flex-shrink-0 min-w-[32px]">
<span className="codicon codicon-trash" />
</Button>
</StandardTooltip>

45
webview-ui/src/index.css
View file

@ -420,6 +420,26 @@ vscode-dropdown::part(listbox) {
min-height: 16px;
}
/* VSCode checkbox specific styles to prevent squeezing */
vscode-checkbox {
flex-shrink: 0;
min-width: fit-content;
display: inline-flex;
align-items: center;
}
/* Ensure VSCode checkbox internals don't squeeze */
vscode-checkbox::part(control) {
flex-shrink: 0;
min-width: 16px;
min-height: 16px;
}
vscode-checkbox::part(label) {
min-width: 0;
margin-left: 0.5rem;
}
/**
* @shadcn/ui Overrides / Hacks
*/
@ -582,6 +602,31 @@ button[class*="codicon"] {
flex-shrink: 0;
}
/* Additional responsive adjustments for very narrow sidebars */
@media (max-width: 350px) {
/* Ensure button groups stay visible */
.flex-shrink-0 {
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: thin;
}
/* Minimum width for button containers */
.flex-shrink-0:has(button) {
min-width: fit-content;
}
}
/* Ensure all settings checkboxes don't squeeze */
.settings-view vscode-checkbox,
[class*="settings"] vscode-checkbox,
[class*="Settings"] vscode-checkbox {
flex-shrink: 0;
min-width: fit-content;
display: inline-flex;
align-items: center;
}
/* Ensure proper text wrapping and overflow handling */
.text-wrap {
word-wrap: break-word;