fix: improve UI scaling when sidebar width is reduced (#2678)

- Adjust Settings View compact mode threshold from 500px to 600px for earlier activation
- Improve text truncation in mode selector dropdowns with better Tailwind classes
- Enhance chat text area API config dropdown responsiveness with min-w-0 classes
- Add responsive CSS utilities for narrow containers and better text overflow handling

Fixes #2678

webview-ui/src/components/chat/ChatTextArea.tsx

@@ -955,7 +955,7 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 							placeholder={displayName}
 							options={getApiConfigOptions}
 							onChange={handleApiConfigChange}
-							triggerClassName="w-full text-ellipsis overflow-hidden"
+							triggerClassName="w-full text-ellipsis overflow-hidden min-w-0"
 							itemClassName="group"
 							renderItem={renderApiConfigItem}
 						/>

webview-ui/src/components/modes/ModesView.tsx

@@ -663,29 +663,16 @@ const ModesView = ({ onDone }: ModesViewProps) => {
 															setOpen(false)
 														}}
 														data-testid={`mode-option-${modeConfig.slug}`}>
-														<div className="flex items-center justify-between w-full">
+														<div className="flex items-center justify-between w-full min-w-0">
 															<span
-																style={{
-																	whiteSpace: "nowrap",
-																	overflow: "hidden",
-																	textOverflow: "ellipsis",
-																	flex: 2,
-																	minWidth: 0,
-																}}>
+																className="truncate flex-1 min-w-0 mr-2"
+																title={modeConfig.name}>
 																{modeConfig.name}
 															</span>
 															<span
-																className="text-foreground"
-																style={{
-																	whiteSpace: "nowrap",
-																	overflow: "hidden",
-																	textOverflow: "ellipsis",
-																	direction: "rtl",
-																	textAlign: "right",
-																	flex: 1,
-																	minWidth: 0,
-																	marginLeft: "0.5em",
-																}}>
+																className="text-foreground text-xs opacity-70 truncate flex-shrink-0 max-w-[40%] text-right"
+																style={{ direction: "rtl" }}
+																title={modeConfig.slug}>
 																{modeConfig.slug}
 															</span>
 														</div>

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

@@ -386,8 +386,8 @@ const SettingsView = forwardRef<SettingsViewRef, SettingsViewProps>(({ onDone, t
 
 		const observer = new ResizeObserver((entries) => {
 			for (const entry of entries) {
-				// If container width is less than 500px, switch to compact mode
-				setIsCompactMode(entry.contentRect.width < 500)
+				// If container width is less than 600px, switch to compact mode
+				setIsCompactMode(entry.contentRect.width < 600)
 			}
 		})
 

webview-ui/src/index.css

@@ -479,3 +479,71 @@ input[cmdk-input]:focus {
 	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 	transition-duration: 150ms;
 }
+
+/* Responsive utilities for narrow containers */
+@media (max-width: 640px) {
+	.responsive-text {
+		font-size: 0.875rem;
+	}
+	
+	.responsive-gap {
+		gap: 0.25rem;
+	}
+	
+	.responsive-padding {
+		padding: 0.5rem;
+	}
+}
+
+/* Container query support for components */
+@container (max-width: 600px) {
+	.container-compact {
+		flex-direction: column;
+		gap: 0.5rem;
+	}
+	
+	.container-compact .settings-tab {
+		min-width: auto;
+		flex: 1;
+	}
+}
+
+/* Improved flex utilities for narrow containers */
+.flex-responsive {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 0.5rem;
+}
+
+.flex-responsive > * {
+	min-width: 0;
+	flex: 1 1 auto;
+}
+
+/* Better text truncation for dropdowns and selectors */
+.dropdown-text {
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	min-width: 0;
+	max-width: 100%;
+}
+
+.dropdown-container {
+	min-width: 0;
+	flex: 1;
+	overflow: hidden;
+}
+
+/* Ensure proper text wrapping and overflow handling */
+.text-wrap {
+	word-wrap: break-word;
+	overflow-wrap: break-word;
+}
+
+.text-ellipsis-safe {
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	min-width: 0;
+}