From 0b01692bbd80395d18763587d39215809d0b511c Mon Sep 17 00:00:00 2001
From: Michael Chihlas <michael@chihlas.com>
Date: Sat, 14 Mar 2026 15:27:02 -0400
Subject: [PATCH] fix: use subtle cyan pill for Manage Templates link, fix
 editor scroll

Replace pulsing dot with a light cyan background pill that's visible
but not distracting. Remove overflow-hidden from ScriptBodyEditor
wrapper so the textarea content scrolls properly.

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

diff --git a/frontend/src/components/script-editor/ScriptBodyEditor.tsx b/frontend/src/components/script-editor/ScriptBodyEditor.tsx
index 1a96dcf5..9890cd5e 100644
--- a/frontend/src/components/script-editor/ScriptBodyEditor.tsx
+++ b/frontend/src/components/script-editor/ScriptBodyEditor.tsx
@@ -26,7 +26,7 @@ export function ScriptBodyEditor({ value, onChange, disabled }: Props) {
   }, [value, onChange])
 
   return (
-    <div className="relative rounded-xl border border-border overflow-hidden">
+    <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">
         <PowerShellHighlighter script={value || ' '} />
diff --git a/frontend/src/pages/ScriptLibraryPage.tsx b/frontend/src/pages/ScriptLibraryPage.tsx
index 88060194..e6ff03aa 100644
--- a/frontend/src/pages/ScriptLibraryPage.tsx
+++ b/frontend/src/pages/ScriptLibraryPage.tsx
@@ -53,12 +53,9 @@ export default function ScriptLibraryPage() {
         {isEngineer && (
           <Link
             to="/scripts/manage"
-            className="inline-flex items-center gap-1.5 text-xs text-muted-foreground hover:text-foreground transition-colors mt-2 group"
+            className="inline-flex items-center gap-1.5 text-xs text-primary bg-primary/10 hover:bg-primary/15 px-2.5 py-1 rounded-full transition-colors mt-2 group"
           >
-            <span className="relative">
-              <Settings size={12} className="group-hover:rotate-90 transition-transform duration-300" />
-              <span className="absolute -top-0.5 -right-0.5 h-1.5 w-1.5 rounded-full bg-primary animate-pulse" />
-            </span>
+            <Settings size={12} className="group-hover:rotate-90 transition-transform duration-300" />
             Manage Templates
           </Link>
         )}