frontend/src/components/script-editor/ScriptBodyEditor.tsx

@@ -9,6 +9,14 @@ interface Props {
 
 export function ScriptBodyEditor({ value, onChange, disabled }: Props) {
   const textareaRef = useRef<HTMLTextAreaElement>(null)
+  const overlayRef = useRef<HTMLDivElement>(null)
+
+  const handleScroll = useCallback(() => {
+    if (textareaRef.current && overlayRef.current) {
+      overlayRef.current.scrollTop = textareaRef.current.scrollTop
+      overlayRef.current.scrollLeft = textareaRef.current.scrollLeft
+    }
+  }, [])
 
   const handleTab = useCallback((e: React.KeyboardEvent<HTMLTextAreaElement>) => {
     if (e.key === 'Tab') {
@@ -26,9 +34,9 @@ export function ScriptBodyEditor({ value, onChange, disabled }: Props) {
   }, [value, onChange])
 
   return (
-    <div className="relative rounded-xl border border-border">
-      {/* Highlighted overlay (read-only visual layer) */}
-      <div className="absolute inset-0 pointer-events-none overflow-auto p-4">
+    <div className="relative rounded-xl border border-border overflow-hidden">
+      {/* Highlighted overlay (read-only visual layer) — scroll synced to textarea */}
+      <div ref={overlayRef} className="absolute inset-0 pointer-events-none overflow-hidden p-4">
         <PowerShellHighlighter script={value || ' '} />
       </div>
 
@@ -37,6 +45,7 @@ export function ScriptBodyEditor({ value, onChange, disabled }: Props) {
         ref={textareaRef}
         value={value}
         onChange={e => onChange(e.target.value)}
+        onScroll={handleScroll}
         onKeyDown={handleTab}
         disabled={disabled}
         spellCheck={false}

frontend/src/pages/ScriptManagePage.tsx

@@ -27,16 +27,18 @@ export default function ScriptManagePage() {
   }
 
   return (
-    <div className="p-6 max-w-5xl mx-auto h-full overflow-y-auto">
-      {mode === 'list' ? (
-        <ScriptTemplateListView onEdit={handleEdit} onCreate={handleCreate} />
-      ) : (
-        <ScriptTemplateEditor
-          templateId={editingId}
-          onBack={handleBack}
-          onSaved={handleSaved}
-        />
-      )}
+    <div className="h-full overflow-y-auto">
+      <div className="p-6 max-w-5xl mx-auto">
+        {mode === 'list' ? (
+          <ScriptTemplateListView onEdit={handleEdit} onCreate={handleCreate} />
+        ) : (
+          <ScriptTemplateEditor
+            templateId={editingId}
+            onBack={handleBack}
+            onSaved={handleSaved}
+          />
+        )}
+      </div>
     </div>
   )
 }