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

Author: MuriloFP

webview-ui/src/components/settings/ApiConfigManager.tsx

@@ -225,7 +225,7 @@ const ApiConfigManager = ({
 				</div>
 			) : (
 				<>
-					<div className="flex items-center gap-1">
+					<div className="flex items-center gap-1 min-w-0">
 						<SearchableSelect
 							value={currentApiConfigName}
 							onValueChange={handleSelectConfig}
@@ -247,42 +247,51 @@ const ApiConfigManager = ({
 							placeholder={t("settings:common.select")}
 							searchPlaceholder={t("settings:providers.searchPlaceholder")}
 							emptyMessage={t("settings:providers.noMatchFound")}
-							className="grow"
+							className="grow min-w-0"
 							data-testid="select-component"
 						/>
-						<StandardTooltip content={t("settings:providers.addProfile")}>
-							<Button variant="ghost" size="icon" onClick={handleAdd} data-testid="add-profile-button">
-								<span className="codicon codicon-add" />
-							</Button>
-						</StandardTooltip>
-						{currentApiConfigName && (
-							<>
-								<StandardTooltip content={t("settings:providers.renameProfile")}>
-									<Button
-										variant="ghost"
-										size="icon"
-										onClick={handleStartRename}
-										data-testid="rename-profile-button">
-										<span className="codicon codicon-edit" />
-									</Button>
-								</StandardTooltip>
-								<StandardTooltip
-									content={
-										isOnlyProfile
-											? t("settings:providers.cannotDeleteOnlyProfile")
-											: t("settings:providers.deleteProfile")
-									}>
-									<Button
-										variant="ghost"
-										size="icon"
-										onClick={handleDelete}
-										data-testid="delete-profile-button"
-										disabled={isOnlyProfile}>
-										<span className="codicon codicon-trash" />
-									</Button>
-								</StandardTooltip>
-							</>
-						)}
+						<div className="flex items-center gap-1 flex-shrink-0">
+							<StandardTooltip content={t("settings:providers.addProfile")}>
+								<Button
+									variant="ghost"
+									size="icon"
+									onClick={handleAdd}
+									data-testid="add-profile-button"
+									className="flex-shrink-0">
+									<span className="codicon codicon-add" />
+								</Button>
+							</StandardTooltip>
+							{currentApiConfigName && (
+								<>
+									<StandardTooltip content={t("settings:providers.renameProfile")}>
+										<Button
+											variant="ghost"
+											size="icon"
+											onClick={handleStartRename}
+											data-testid="rename-profile-button"
+											className="flex-shrink-0">
+											<span className="codicon codicon-edit" />
+										</Button>
+									</StandardTooltip>
+									<StandardTooltip
+										content={
+											isOnlyProfile
+												? t("settings:providers.cannotDeleteOnlyProfile")
+												: t("settings:providers.deleteProfile")
+										}>
+										<Button
+											variant="ghost"
+											size="icon"
+											onClick={handleDelete}
+											data-testid="delete-profile-button"
+											disabled={isOnlyProfile}
+											className="flex-shrink-0">
+											<span className="codicon codicon-trash" />
+										</Button>
+									</StandardTooltip>
+								</>
+							)}
+						</div>
 					</div>
 					<div className="text-vscode-descriptionForeground text-sm mt-1">
 						{t("settings:providers.description")}

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;