From 10c983cc2f0d1b4c62b5b8c2a5dadcd69862aa3d Mon Sep 17 00:00:00 2001 From: Roo Code Date: Fri, 18 Jul 2025 18:53:32 +0000 Subject: [PATCH 1/4] fix: improve UI scaling when sidebar width is reduced (#2678) - 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 --- .../src/components/chat/ChatTextArea.tsx | 2 +- webview-ui/src/components/modes/ModesView.tsx | 25 ++----- .../src/components/settings/SettingsView.tsx | 4 +- webview-ui/src/index.css | 68 +++++++++++++++++++ 4 files changed, 77 insertions(+), 22 deletions(-) diff --git a/webview-ui/src/components/chat/ChatTextArea.tsx b/webview-ui/src/components/chat/ChatTextArea.tsx index 6c541353eb2..2352b887e42 100644 --- a/webview-ui/src/components/chat/ChatTextArea.tsx +++ b/webview-ui/src/components/chat/ChatTextArea.tsx @@ -955,7 +955,7 @@ const ChatTextArea = forwardRef( placeholder={displayName} options={getApiConfigOptions} onChange={handleApiConfigChange} - triggerClassName="w-full text-ellipsis overflow-hidden" + triggerClassName="w-full text-ellipsis overflow-hidden min-w-0" itemClassName="group" renderItem={renderApiConfigItem} /> diff --git a/webview-ui/src/components/modes/ModesView.tsx b/webview-ui/src/components/modes/ModesView.tsx index 170d03b0e47..188cd6cb1ef 100644 --- a/webview-ui/src/components/modes/ModesView.tsx +++ b/webview-ui/src/components/modes/ModesView.tsx @@ -663,29 +663,16 @@ const ModesView = ({ onDone }: ModesViewProps) => { setOpen(false) }} data-testid={`mode-option-${modeConfig.slug}`}> -
+
+ className="truncate flex-1 min-w-0 mr-2" + title={modeConfig.name}> {modeConfig.name} + className="text-foreground text-xs opacity-70 truncate flex-shrink-0 max-w-[40%] text-right" + style={{ direction: "rtl" }} + title={modeConfig.slug}> {modeConfig.slug}
diff --git a/webview-ui/src/components/settings/SettingsView.tsx b/webview-ui/src/components/settings/SettingsView.tsx index fd3a8a129b6..d794c84d440 100644 --- a/webview-ui/src/components/settings/SettingsView.tsx +++ b/webview-ui/src/components/settings/SettingsView.tsx @@ -386,8 +386,8 @@ const SettingsView = forwardRef(({ onDone, t const observer = new ResizeObserver((entries) => { for (const entry of entries) { - // If container width is less than 500px, switch to compact mode - setIsCompactMode(entry.contentRect.width < 500) + // If container width is less than 600px, switch to compact mode + setIsCompactMode(entry.contentRect.width < 600) } }) diff --git a/webview-ui/src/index.css b/webview-ui/src/index.css index fbb362ca8f5..94795c42ca9 100644 --- a/webview-ui/src/index.css +++ b/webview-ui/src/index.css @@ -479,3 +479,71 @@ input[cmdk-input]:focus { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } + +/* Responsive utilities for narrow containers */ +@media (max-width: 640px) { + .responsive-text { + font-size: 0.875rem; + } + + .responsive-gap { + gap: 0.25rem; + } + + .responsive-padding { + padding: 0.5rem; + } +} + +/* Container query support for components */ +@container (max-width: 600px) { + .container-compact { + flex-direction: column; + gap: 0.5rem; + } + + .container-compact .settings-tab { + min-width: auto; + flex: 1; + } +} + +/* Improved flex utilities for narrow containers */ +.flex-responsive { + display: flex; + flex-wrap: wrap; + gap: 0.5rem; +} + +.flex-responsive > * { + min-width: 0; + flex: 1 1 auto; +} + +/* Better text truncation for dropdowns and selectors */ +.dropdown-text { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + min-width: 0; + max-width: 100%; +} + +.dropdown-container { + min-width: 0; + flex: 1; + overflow: hidden; +} + +/* Ensure proper text wrapping and overflow handling */ +.text-wrap { + word-wrap: break-word; + overflow-wrap: break-word; +} + +.text-ellipsis-safe { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + min-width: 0; +} From aaec18012259e66da902c9157b3b5f41994a302c Mon Sep 17 00:00:00 2001 From: MuriloFP Date: Thu, 24 Jul 2025 16:39:16 -0300 Subject: [PATCH 2/4] fix: improve UI responsiveness for narrow sidebar widths - 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 --- .../components/settings/ApiConfigManager.tsx | 79 +++++++++++-------- webview-ui/src/index.css | 53 ++++++++++++- 2 files changed, 94 insertions(+), 38 deletions(-) diff --git a/webview-ui/src/components/settings/ApiConfigManager.tsx b/webview-ui/src/components/settings/ApiConfigManager.tsx index e737678c01e..24f2d8a52ab 100644 --- a/webview-ui/src/components/settings/ApiConfigManager.tsx +++ b/webview-ui/src/components/settings/ApiConfigManager.tsx @@ -225,7 +225,7 @@ const ApiConfigManager = ({
) : ( <> -
+
- - - - {currentApiConfigName && ( - <> - - - - - - - - )} +
+ + + + {currentApiConfigName && ( + <> + + + + + + + + )} +
{t("settings:providers.description")} diff --git a/webview-ui/src/index.css b/webview-ui/src/index.css index 94795c42ca9..0dcf946bad7 100644 --- a/webview-ui/src/index.css +++ b/webview-ui/src/index.css @@ -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; From 670cd6778cf45f4b1d822b848a0d917e449f1b68 Mon Sep 17 00:00:00 2001 From: MuriloFP Date: Thu, 24 Jul 2025 17:03:44 -0300 Subject: [PATCH 3/4] fix: improve UI responsiveness for narrow sidebar widths - 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 --- .../components/settings/ApiConfigManager.tsx | 8 ++-- webview-ui/src/index.css | 45 +++++++++++++++++++ 2 files changed, 49 insertions(+), 4 deletions(-) diff --git a/webview-ui/src/components/settings/ApiConfigManager.tsx b/webview-ui/src/components/settings/ApiConfigManager.tsx index 24f2d8a52ab..62be19dc245 100644 --- a/webview-ui/src/components/settings/ApiConfigManager.tsx +++ b/webview-ui/src/components/settings/ApiConfigManager.tsx @@ -250,14 +250,14 @@ const ApiConfigManager = ({ className="grow min-w-0" data-testid="select-component" /> -
+
@@ -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]"> @@ -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]"> diff --git a/webview-ui/src/index.css b/webview-ui/src/index.css index 0dcf946bad7..15ff1cfd5a5 100644 --- a/webview-ui/src/index.css +++ b/webview-ui/src/index.css @@ -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; From bb941c12dd207a73f0f529d86b2619fd2d106bb5 Mon Sep 17 00:00:00 2001 From: Roo Code Date: Fri, 25 Jul 2025 17:40:37 +0000 Subject: [PATCH 4/4] fix: address review comments - remove duplicate CSS and fix RTL hack - Removed duplicate .dropdown-container class definition in index.css (line 577) - Replaced RTL direction hack with proper text-align approach in ModesView.tsx for better accessibility --- webview-ui/src/components/modes/ModesView.tsx | 4 ++-- webview-ui/src/index.css | 6 ------ 2 files changed, 2 insertions(+), 8 deletions(-) diff --git a/webview-ui/src/components/modes/ModesView.tsx b/webview-ui/src/components/modes/ModesView.tsx index 188cd6cb1ef..d18de20d90e 100644 --- a/webview-ui/src/components/modes/ModesView.tsx +++ b/webview-ui/src/components/modes/ModesView.tsx @@ -670,8 +670,8 @@ const ModesView = ({ onDone }: ModesViewProps) => { {modeConfig.name} {modeConfig.slug} diff --git a/webview-ui/src/index.css b/webview-ui/src/index.css index 15ff1cfd5a5..ee340f0ce33 100644 --- a/webview-ui/src/index.css +++ b/webview-ui/src/index.css @@ -570,12 +570,6 @@ input[cmdk-input]:focus { max-width: 100%; } -.dropdown-container { - min-width: 0; - flex: 1; - overflow: hidden; -} - /* Settings view specific responsive adjustments */ @container (max-width: 400px) { /* Reduce button sizes in very narrow containers */