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>
   )