diff --git a/webview-ui/src/components/settings/ApiConfigManager.tsx b/webview-ui/src/components/settings/ApiConfigManager.tsx index e737678c01..24f2d8a52a 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 94795c42ca..0dcf946bad 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;