From 099a4a2b4e01119e39b4f6cac8c95e92a60e1bb4 Mon Sep 17 00:00:00 2001
From: Michael Chihlas <michael@chihlas.com>
Date: Sat, 14 Mar 2026 19:26:55 -0400
Subject: [PATCH] fix: align textarea and syntax overlay to fix cursor/text
 mismatch

The highlighted overlay had double padding (wrapper p-4 + pre p-4) and
its own bg-card background, causing the visible text to drift from the
actual cursor position. Fix: strip pre padding/background in overlay
mode via className prop, add explicit line-height and whitespace-pre-wrap
to both layers so they wrap identically character-for-character.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 frontend/src/components/script-editor/ScriptBodyEditor.tsx | 4 ++--
 frontend/src/components/scripts/PowerShellHighlighter.tsx  | 5 +++--
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/script-editor/ScriptBodyEditor.tsx b/frontend/src/components/script-editor/ScriptBodyEditor.tsx
index a61d41ff..e16246d8 100644
--- a/frontend/src/components/script-editor/ScriptBodyEditor.tsx
+++ b/frontend/src/components/script-editor/ScriptBodyEditor.tsx
@@ -37,7 +37,7 @@ export function ScriptBodyEditor({ value, onChange, disabled }: Props) {
     <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 || ' '} />
+        <PowerShellHighlighter script={value || ' '} className="font-label text-sm leading-[1.5] whitespace-pre-wrap break-words m-0" />
       </div>
 
       {/* Editable textarea (transparent text, visible caret) */}
@@ -49,7 +49,7 @@ export function ScriptBodyEditor({ value, onChange, disabled }: Props) {
         onKeyDown={handleTab}
         disabled={disabled}
         spellCheck={false}
-        className="relative z-10 w-full min-h-[300px] resize-y font-label text-sm bg-transparent text-transparent caret-foreground p-4 focus:outline-none focus:ring-1 focus:ring-[rgba(6,182,212,0.2)] disabled:cursor-not-allowed disabled:opacity-50"
+        className="relative z-10 w-full min-h-[300px] resize-y font-label text-sm leading-[1.5] bg-transparent text-transparent caret-foreground p-4 whitespace-pre-wrap break-words focus:outline-none focus:ring-1 focus:ring-[rgba(6,182,212,0.2)] disabled:cursor-not-allowed disabled:opacity-50"
         placeholder="# Enter your PowerShell script here…&#10;# Use {{ param_name }} for parameter placeholders"
       />
     </div>
diff --git a/frontend/src/components/scripts/PowerShellHighlighter.tsx b/frontend/src/components/scripts/PowerShellHighlighter.tsx
index a27ad551..cfa80677 100644
--- a/frontend/src/components/scripts/PowerShellHighlighter.tsx
+++ b/frontend/src/components/scripts/PowerShellHighlighter.tsx
@@ -62,9 +62,10 @@ function classify(token: string): string {
 
 interface Props {
   script: string
+  className?: string
 }
 
-export function PowerShellHighlighter({ script }: Props) {
+export function PowerShellHighlighter({ script, className }: Props) {
   const parts: React.ReactNode[] = []
   let lastIndex = 0
 
@@ -90,7 +91,7 @@ export function PowerShellHighlighter({ script }: Props) {
   }
 
   return (
-    <pre className="font-label text-sm bg-card rounded-xl p-4 overflow-x-auto">
+    <pre className={className ?? "font-label text-sm bg-card rounded-xl p-4 overflow-x-auto"}>
       <code>{parts}</code>
     </pre>
   )