fix: prevent token stats overflow in narrow windows

- Removed flex-wrap from token stats container to keep items on single line
- Added flexShrink: 0 to prevent badge and stats from shrinking
- Added whiteSpace: nowrap to maintain single-line display
- Grouped cost badge and token stats in separate container for better layout control
- Added minWidth: 0 to parent container for proper text truncation

This fixes the UI overflow issue where the price would break into two lines
and overflow the gray box in narrow window widths.

Author: roomote

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

@@ -1122,33 +1122,49 @@ 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
+									<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>