scriptoriumadmin/Roo-Code
1
0
Fork 0
mirror of https://github.com/RooVetGit/Roo-Code.git synced 2026-10-09 03:17:58 +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 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
This commit is contained in:
MuriloFP 2025-07-24 16:39:16 -03:00
parent 10c983cc2f
commit aaec180122
2 changed files with 94 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -225,7 +225,7 @@ const ApiConfigManager = ({
</div>
) : (
<>
<div className="flex items-center gap-1">
<div className="flex items-center gap-1 min-w-0">
<SearchableSelect
value={currentApiConfigName}
onValueChange={handleSelectConfig}
@ -247,42 +247,51 @@ const ApiConfigManager = ({
placeholder={t("settings:common.select")}
searchPlaceholder={t("settings:providers.searchPlaceholder")}
emptyMessage={t("settings:providers.noMatchFound")}
className="grow"
className="grow min-w-0"
data-testid="select-component"
/>
<StandardTooltip content={t("settings:providers.addProfile")}>
<Button variant="ghost" size="icon" onClick={handleAdd} data-testid="add-profile-button">
<span className="codicon codicon-add" />
</Button>
</StandardTooltip>
{currentApiConfigName && (
<>
<StandardTooltip content={t("settings:providers.renameProfile")}>
<Button
variant="ghost"
size="icon"
onClick={handleStartRename}
data-testid="rename-profile-button">
<span className="codicon codicon-edit" />
</Button>
</StandardTooltip>
<StandardTooltip
content={
isOnlyProfile
? t("settings:providers.cannotDeleteOnlyProfile")
: t("settings:providers.deleteProfile")
}>
<Button
variant="ghost"
size="icon"
onClick={handleDelete}
data-testid="delete-profile-button"
disabled={isOnlyProfile}>
<span className="codicon codicon-trash" />
</Button>
</StandardTooltip>
</>
)}
<div className="flex items-center gap-1 flex-shrink-0">
<StandardTooltip content={t("settings:providers.addProfile")}>
<Button
variant="ghost"
size="icon"
onClick={handleAdd}
data-testid="add-profile-button"
className="flex-shrink-0">
<span className="codicon codicon-add" />
</Button>
</StandardTooltip>
{currentApiConfigName && (
<>
<StandardTooltip content={t("settings:providers.renameProfile")}>
<Button
variant="ghost"
size="icon"
onClick={handleStartRename}
data-testid="rename-profile-button"
className="flex-shrink-0">
<span className="codicon codicon-edit" />
</Button>
</StandardTooltip>
<StandardTooltip
content={
isOnlyProfile
? t("settings:providers.cannotDeleteOnlyProfile")
: t("settings:providers.deleteProfile")
}>
<Button
variant="ghost"
size="icon"
onClick={handleDelete}
data-testid="delete-profile-button"
disabled={isOnlyProfile}
className="flex-shrink-0">
<span className="codicon codicon-trash" />
</Button>
</StandardTooltip>
</>
)}
</div>
</div>
<div className="text-vscode-descriptionForeground text-sm mt-1">
{t("settings:providers.description")}

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

@ -399,6 +399,27 @@ vscode-dropdown::part(listbox) {
min-height: 16px;
}
/* Ensure checkbox containers don't squeeze */
.vscrui-checkbox {
flex-shrink: 0;
min-width: fit-content;
}
/* Prevent checkbox label text from wrapping inappropriately */
.vscrui-checkbox label {
display: flex;
align-items: center;
gap: 0.5rem;
min-width: 0;
}
/* Ensure checkbox input maintains size */
.vscrui-checkbox input[type="checkbox"] {
flex-shrink: 0;
min-width: 16px;
min-height: 16px;
}
/**
* @shadcn/ui Overrides / Hacks
*/
@ -485,11 +506,11 @@ input[cmdk-input]:focus {
.responsive-text {
font-size: 0.875rem;
}
.responsive-gap {
gap: 0.25rem;
}
.responsive-padding {
padding: 0.5rem;
}
@ -501,7 +522,7 @@ input[cmdk-input]:focus {
flex-direction: column;
gap: 0.5rem;
}
.container-compact .settings-tab {
min-width: auto;
flex: 1;
@ -535,6 +556,32 @@ input[cmdk-input]:focus {
overflow: hidden;
}
/* Settings view specific responsive adjustments */
@container (max-width: 400px) {
/* Reduce button sizes in very narrow containers */
.settings-view button[class*="size-icon"] {
width: 2rem;
height: 2rem;
padding: 0.25rem;
}
/* Adjust gap between elements */
.settings-view .flex.gap-1 {
gap: 0.25rem;
}
}
/* Ensure profile selector doesn't overflow */
.profile-selector-container {
min-width: 0;
overflow: hidden;
}
/* Prevent icon buttons from shrinking */
button[class*="codicon"] {
flex-shrink: 0;
}
/* Ensure proper text wrapping and overflow handling */
.text-wrap {
word-wrap: break-word;