diff --git a/webview-ui/src/components/settings/ApiConfigManager.tsx b/webview-ui/src/components/settings/ApiConfigManager.tsx index 24f2d8a52a..62be19dc24 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 0dcf946bad..15ff1cfd5a 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;