fix: Hide "API Request" text when container width is limited

- Wrapped API Request text in a span with class api-request-text
- Added responsive CSS to hide text on narrow screens (< 400px)
- Added container query support for more precise control
- Maintains visibility of cost badge and token statistics
- Prevents text truncation issues in narrow windows

Author: roomote

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

@@ -1122,33 +1122,62 @@ export const ChatRowContent = ({
 									msUserSelect: "none",
 								}}
 								onClick={handleToggleExpand}>
-								<div style={{ display: "flex", alignItems: "center", gap: "10px", flexGrow: 1 }}>
+								<div
+									style={{
+										display: "flex",
+										alignItems: "center",
+										gap: "10px",
+										flexGrow: 1,
+										minWidth: 0,
+									}}>
 									{icon}
-									{title}
-									<VSCodeBadge
-										style={{ opacity: cost !== null && cost !== undefined && cost > 0 ? 1 : 0 }}>
-										${Number(cost || 0)?.toFixed(4)}
-									</VSCodeBadge>
-									{hasTokenData && (
-										<div
-											className="flex items-center gap-1 flex-wrap"
-											style={{ opacity: hasTokenData ? 1 : 0 }}>
-											<span
-												style={{
-													fontSize: "12px",
-													color: "var(--vscode-descriptionForeground)",
-												}}>
-												↑ {tokenStats.input}
-											</span>
-											<span
+									<span
+										className="api-request-text"
+										style={{
+											display: "inline-block",
+											fontWeight: "bold",
+											color: "var(--vscode-foreground)",
+											whiteSpace: "nowrap",
+											overflow: "hidden",
+											textOverflow: "ellipsis",
+											flexShrink: 1,
+											minWidth: 0,
+										}}>
+										{title}
+									</span>
+									<div style={{ display: "flex", alignItems: "center", gap: "8px", flexShrink: 0 }}>
+										<VSCodeBadge
+											style={{
+												opacity: cost !== null && cost !== undefined && cost > 0 ? 1 : 0,
+												flexShrink: 0,
+											}}>
+											${Number(cost || 0)?.toFixed(4)}
+										</VSCodeBadge>
+										{hasTokenData && (
+											<div
+												className="flex items-center gap-1"
 												style={{
-													fontSize: "12px",
-													color: "var(--vscode-descriptionForeground)",
+													opacity: hasTokenData ? 1 : 0,
+													flexShrink: 0,
+													whiteSpace: "nowrap",
 												}}>
-												↓ {tokenStats.output}
-											</span>
-										</div>
-									)}
+												<span
+													style={{
+														fontSize: "12px",
+														color: "var(--vscode-descriptionForeground)",
+													}}>
+													↑ {tokenStats.input}
+												</span>
+												<span
+													style={{
+														fontSize: "12px",
+														color: "var(--vscode-descriptionForeground)",
+													}}>
+													↓ {tokenStats.output}
+												</span>
+											</div>
+										)}
+									</div>
 								</div>
 								<span className={`codicon codicon-chevron-${isExpanded ? "up" : "down"}`}></span>
 							</div>

webview-ui/src/index.css

@@ -486,4 +486,24 @@ input[cmdk-input]:focus {
 	transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
 	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 	transition-duration: 150ms;
+
+	/* Hide API Request text when container is too narrow */
+	@media (max-width: 400px) {
+		.api-request-text {
+			display: none !important;
+		}
+	}
+
+	/* Alternative: Use container query for more precise control */
+	@supports (container-type: inline-size) {
+		.api-request-container {
+			container-type: inline-size;
+		}
+
+		@container (max-width: 350px) {
+			.api-request-text {
+				display: none !important;
+			}
+		}
+	}
 }