Refactor potentially relevant details; fix terminal output processing

webview-ui/src/components/ChatRow.tsx

@@ -444,25 +444,29 @@ const ChatRowContent = ({ message, isExpanded, onToggleExpand, lastModifiedMessa
 							<div
 								style={{
 									display: "flex",
-									alignItems: "center",
+									flexDirection: "column",
 									backgroundColor: "rgba(255, 191, 0, 0.1)",
 									padding: 8,
 									borderRadius: 3,
 									fontSize: 12,
 								}}>
-								<i
-									className="codicon codicon-warning"
-									style={{
-										marginRight: 8,
-										fontSize: 18,
-										color: "#FFA500",
-									}}></i>
-								<span>
-									Shell integration is not available! Claude will not be able to see the output of the
-									command. Please update to the latest version of VSCode (
-									{"CMD/CTRL + Shift + P → Update"}) and ensure you are using one of the following
-									shells: bash, zsh, fish, or PowerShell.
-								</span>
+								<div style={{ display: "flex", alignItems: "center", marginBottom: 4 }}>
+									<i
+										className="codicon codicon-warning"
+										style={{
+											marginRight: 8,
+											fontSize: 18,
+											color: "#FFA500",
+										}}></i>
+									<span style={{ fontWeight: 500, color: "#FFA500" }}>
+										Shell Integration Unavailable
+									</span>
+								</div>
+								<div>
+									Claude won't be able to view the command's output. Please update VSCode (CMD/CTRL +
+									Shift + P → Update) and make sure you're using a supported shell: bash, zsh, fish,
+									or PowerShell.
+								</div>
 							</div>
 						</>
 					)