From 670cd6778cf45f4b1d822b848a0d917e449f1b68 Mon Sep 17 00:00:00 2001
From: MuriloFP <muriloferreira2@gmail.com>
Date: Thu, 24 Jul 2025 17:03:44 -0300
Subject: [PATCH] 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 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"
 						/>
-						<div className="flex items-center gap-1 flex-shrink-0">
+						<div className="flex items-center gap-0.5 flex-shrink-0 ml-1">
 							<StandardTooltip content={t("settings:providers.addProfile")}>
 								<Button
 									variant="ghost"
 									size="icon"
 									onClick={handleAdd}
 									data-testid="add-profile-button"
-									className="flex-shrink-0">
+									className="flex-shrink-0 min-w-[32px]">
 									<span className="codicon codicon-add" />
 								</Button>
 							</StandardTooltip>
@@ -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]">
 											<span className="codicon codicon-edit" />
 										</Button>
 									</StandardTooltip>
@@ -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]">
 											<span className="codicon codicon-trash" />
 										</Button>
 									</StandardTooltip>
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;