feat: add click-to-edit, ESC-to-cancel, and fix padding consistency

- Enable click-to-edit for past messages by making message text clickable
- Add ESC key handler to cancel edit mode in ChatTextArea
- Fix padding consistency between past and queued message editors
- Adjust right padding for edit mode to accommodate cancel button

Fixes #7788

Author: roomote

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

@@ -1174,7 +1174,7 @@ export const ChatRowContent = ({
 					return (
 						<div className="bg-vscode-editor-background border rounded-xs p-1 overflow-hidden whitespace-pre-wrap">
 							{isEditing ? (
-								<div className="flex flex-col gap-2 p-2">
+								<div className="flex flex-col gap-2">
 									<ChatTextArea
 										inputValue={editedContent}
 										setInputValue={setEditedContent}
@@ -1195,7 +1195,15 @@ export const ChatRowContent = ({
 								</div>
 							) : (
 								<div className="flex justify-between">
-									<div className="flex-grow px-2 py-1 wrap-anywhere">
+									<div
+										className="flex-grow px-2 py-1 wrap-anywhere cursor-pointer hover:bg-vscode-list-hoverBackground rounded transition-colors"
+										onClick={(e) => {
+											e.stopPropagation()
+											if (!isStreaming) {
+												handleEditClick()
+											}
+										}}
+										title={t("chat:queuedMessages.clickToEdit")}>
 										<Mention text={message.text} withShadow />
 									</div>
 									<div className="flex">

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

@@ -1030,7 +1030,15 @@ export const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 									updateHighlights()
 								}}
 								onFocus={() => setIsFocused(true)}
-								onKeyDown={handleKeyDown}
+								onKeyDown={(e) => {
+									// Handle ESC to cancel in edit mode
+									if (isEditMode && e.key === "Escape" && !e.nativeEvent?.isComposing) {
+										e.preventDefault()
+										onCancel?.()
+										return
+									}
+									handleKeyDown(e)
+								}}
 								onKeyUp={handleKeyUp}
 								onBlur={handleBlur}
 								onPaste={handlePaste}
@@ -1071,7 +1079,7 @@ export const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 									"resize-none",
 									"overflow-x-hidden",
 									"overflow-y-auto",
-									"pr-9",
+									isEditMode ? "pr-[72px]" : "pr-9",
 									"flex-none flex-grow",
 									"z-[2]",
 									"scrollbar-none",