From b28edaba02593d00575419c8b3a32c0d934e8921 Mon Sep 17 00:00:00 2001
From: Roo Code <roomote@roocode.com>
Date: Sat, 18 Oct 2025 21:03:10 +0000
Subject: [PATCH] fix: scroll to edit area when editing long historical
 messages

- Added ref to track edit area element
- Added useEffect to scroll into view when entering edit mode
- Uses smooth scrolling with center block positioning for better UX

Fixes #8724
---
 webview-ui/src/components/chat/ChatRow.tsx | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/webview-ui/src/components/chat/ChatRow.tsx b/webview-ui/src/components/chat/ChatRow.tsx
index b0b87e7a2d..d5baf2a66a 100644
--- a/webview-ui/src/components/chat/ChatRow.tsx
+++ b/webview-ui/src/components/chat/ChatRow.tsx
@@ -136,6 +136,7 @@ export const ChatRowContent = ({
 	const [editedContent, setEditedContent] = useState("")
 	const [editMode, setEditMode] = useState<Mode>(mode || "code")
 	const [editImages, setEditImages] = useState<string[]>([])
+	const editAreaRef = useRef<HTMLDivElement>(null)
 
 	// Handle message events for image selection during edit mode
 	useEffect(() => {
@@ -165,6 +166,19 @@ export const ChatRowContent = ({
 		// No need to notify the backend
 	}, [message.text, message.images, mode])
 
+	// Scroll to edit area when entering edit mode
+	useEffect(() => {
+		if (isEditing && editAreaRef.current) {
+			// Use a small delay to ensure the DOM has updated
+			setTimeout(() => {
+				editAreaRef.current?.scrollIntoView({
+					behavior: "smooth",
+					block: "center",
+				})
+			}, 100)
+		}
+	}, [isEditing])
+
 	// Handle cancel edit
 	const handleCancelEdit = useCallback(() => {
 		setIsEditing(false)
@@ -1110,6 +1124,7 @@ export const ChatRowContent = ({
 								<span style={{ fontWeight: "bold" }}>{t("chat:feedback.youSaid")}</span>
 							</div>
 							<div
+								ref={editAreaRef}
 								className={cn(
 									"ml-6 border rounded-sm overflow-hidden whitespace-pre-wrap",
 									isEditing