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;