Make chat icons shrink-0 (#8343)

Author: mrubens

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

@@ -290,9 +290,9 @@ export const ChatRowContent = ({
 						)
 					) : cost !== null && cost !== undefined ? (
 						isExpanded ? (
-							<ChevronDown className="w-4" />
+							<ChevronDown className="w-4 shrink-0" />
 						) : (
-							<ChevronRight className="w-4" />
+							<ChevronRight className="w-4 shrink-0" />
 						)
 					) : apiRequestFailedMessage ? (
 						getIconSpan("error", errorColor)
@@ -319,7 +319,7 @@ export const ChatRowContent = ({
 				]
 			case "followup":
 				return [
-					<MessageCircleQuestionMark className="w-4" aria-label="Question icon" />,
+					<MessageCircleQuestionMark className="w-4 shrink-0" aria-label="Question icon" />,
 					<span style={{ color: normalColor, fontWeight: "bold" }}>{t("chat:questions.hasQuestion")}</span>,
 				]
 			default:
@@ -372,7 +372,7 @@ export const ChatRowContent = ({
 					return (
 						<>
 							<div style={headerStyle}>
-								<FileDiff className="w-4" aria-label="Batch diff icon" />
+								<FileDiff className="w-4 shrink-0" aria-label="Batch diff icon" />
 								<span style={{ fontWeight: "bold" }}>
 									{t("chat:fileOperations.wantsToApplyBatchChanges")}
 								</span>
@@ -561,7 +561,7 @@ export const ChatRowContent = ({
 					return (
 						<>
 							<div style={headerStyle}>
-								<Eye className="w-4" aria-label="View files icon" />
+								<Eye className="w-4 shrink-0" aria-label="View files icon" />
 								<span style={{ fontWeight: "bold" }}>
 									{t("chat:fileOperations.wantsToReadMultiple")}
 								</span>
@@ -581,7 +581,7 @@ export const ChatRowContent = ({
 				return (
 					<>
 						<div style={headerStyle}>
-							<FileCode2 className="w-4" aria-label="Read file icon" />
+							<FileCode2 className="w-4 shrink-0" aria-label="Read file icon" />
 							<span style={{ fontWeight: "bold" }}>
 								{message.type === "ask"
 									? tool.isOutsideWorkspace
@@ -606,7 +606,7 @@ export const ChatRowContent = ({
 									</span>
 									<div style={{ flexGrow: 1 }}></div>
 									<SquareArrowOutUpRight
-										className="w-4 codicon codicon-link-external opacity-0 group-hover:opacity-100 transition-opacity"
+										className="w-4 shrink-0 codicon codicon-link-external opacity-0 group-hover:opacity-100 transition-opacity"
 										style={{ fontSize: 13.5, margin: "1px 0" }}
 									/>
 								</ToolUseBlockHeader>
@@ -636,7 +636,7 @@ export const ChatRowContent = ({
 				return (
 					<>
 						<div style={headerStyle}>
-							<ListTree className="w-4" aria-label="List files icon" />
+							<ListTree className="w-4 shrink-0" aria-label="List files icon" />
 							<span style={{ fontWeight: "bold" }}>
 								{message.type === "ask"
 									? tool.isOutsideWorkspace
@@ -662,7 +662,7 @@ export const ChatRowContent = ({
 				return (
 					<>
 						<div style={headerStyle}>
-							<FolderTree className="w-4" aria-label="Folder tree icon" />
+							<FolderTree className="w-4 shrink-0" aria-label="Folder tree icon" />
 							<span style={{ fontWeight: "bold" }}>
 								{message.type === "ask"
 									? tool.isOutsideWorkspace
@@ -754,7 +754,7 @@ export const ChatRowContent = ({
 				return (
 					<>
 						<div style={headerStyle}>
-							<PocketKnife className="w-4" aria-label="Switch mode icon" />
+							<PocketKnife className="w-4 shrink-0" aria-label="Switch mode icon" />
 							<span style={{ fontWeight: "bold" }}>
 								{message.type === "ask" ? (
 									<>
@@ -1120,7 +1120,7 @@ export const ChatRowContent = ({
 					return (
 						<div>
 							<div style={headerStyle}>
-								<MessageCircle className="w-4" aria-label="Speech bubble icon" />
+								<MessageCircle className="w-4 shrink-0" aria-label="Speech bubble icon" />
 								<span style={{ fontWeight: "bold" }}>{t("chat:text.rooSaid")}</span>
 							</div>
 							<div className="pl-6">
@@ -1139,7 +1139,7 @@ export const ChatRowContent = ({
 					return (
 						<div className="group">
 							<div style={headerStyle}>
-								<User className="w-4" aria-label="User icon" />
+								<User className="w-4 shrink-0" aria-label="User icon" />
 								<span style={{ fontWeight: "bold" }}>{t("chat:feedback.youSaid")}</span>
 							</div>
 							<div
@@ -1190,7 +1190,7 @@ export const ChatRowContent = ({
 													e.stopPropagation()
 													handleEditClick()
 												}}>
-												<Edit className="w-4" aria-label="Edit message icon" />
+												<Edit className="w-4 shrink-0" aria-label="Edit message icon" />
 											</div>
 											<div
 												className="cursor-pointer shrink-0 opacity-0 group-hover:opacity-100 transition-opacity"
@@ -1199,7 +1199,7 @@ export const ChatRowContent = ({
 													e.stopPropagation()
 													vscode.postMessage({ type: "deleteMessage", value: message.ts })
 												}}>
-												<Trash2 className="w-4" aria-label="Delete message icon" />
+												<Trash2 className="w-4 shrink-0" aria-label="Delete message icon" />
 											</div>
 										</div>
 									</div>