From 05bf847c6ab6f52646bb7ea650680f3913b9c6f3 Mon Sep 17 00:00:00 2001
From: Tim Bradgate <timbradgate@hotmail.co.uk>
Date: Sun, 7 Jun 2026 22:08:28 +0100
Subject: [PATCH] Highlight script row on Edit/dropdown button hover in both
 UIs
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replicates the cue editor's CSS :has() pattern — when the user hovers
the Edit button or dropdown caret in the script viewer, the full row
gets a subtle background highlight to make the target line clear.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../components/show/config/script/ScriptLineViewer.vue    | 8 +++++++-
 .../show/config/script/ScriptLineViewer.vue               | 7 +++++++
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/client-v3/src/components/show/config/script/ScriptLineViewer.vue b/client-v3/src/components/show/config/script/ScriptLineViewer.vue
index 5c3c6c0e..6bf13b50 100644
--- a/client-v3/src/components/show/config/script/ScriptLineViewer.vue
+++ b/client-v3/src/components/show/config/script/ScriptLineViewer.vue
@@ -1,5 +1,6 @@
 <template>
   <BRow
+    class="script-line-row"
     :class="{
       'stage-direction': line.line_type === LINE_TYPES.STAGE_DIRECTION,
       'heading-padding': line.line_type === LINE_TYPES.DIALOGUE && needsHeadingsAll,
@@ -121,7 +122,7 @@
           End
         </BButton>
       </BButtonGroup>
-      <BButtonGroup v-else-if="canEdit && !isCutMode">
+      <BButtonGroup v-else-if="canEdit && !isCutMode" class="script-edit-controls">
         <BButton variant="link" style="padding: 0" @click.prevent.stop="$emit('editLine')"
           >Edit</BButton
         >
@@ -305,4 +306,9 @@ function cutLinePart(partIndex: number): void {
 .cut-line-part {
   text-decoration: line-through;
 }
+.script-line-row:has(.script-edit-controls:hover) {
+  background-color: rgba(255, 255, 255, 0.06);
+  border-radius: 4px;
+  transition: background-color 0.15s ease;
+}
 </style>
diff --git a/client/src/vue_components/show/config/script/ScriptLineViewer.vue b/client/src/vue_components/show/config/script/ScriptLineViewer.vue
index e2751e33..d901cf3d 100644
--- a/client/src/vue_components/show/config/script/ScriptLineViewer.vue
+++ b/client/src/vue_components/show/config/script/ScriptLineViewer.vue
@@ -1,5 +1,6 @@
 <template>
   <b-row
+    class="script-line-row"
     :class="{
       'stage-direction': line.line_type === LINE_TYPES.STAGE_DIRECTION,
       'heading-padding': line.line_type === LINE_TYPES.DIALOGUE && needsHeadingsAll,
@@ -142,6 +143,7 @@
       </b-button-group>
       <b-dropdown
         v-else-if="canEdit && !IS_CUT_MODE"
+        class="script-edit-controls"
         split
         text="Edit"
         right
@@ -386,4 +388,9 @@ export default defineComponent({
 .cut-line-part {
   text-decoration: line-through;
 }
+.script-line-row:has(.script-edit-controls:hover) {
+  background-color: rgba(255, 255, 255, 0.06);
+  border-radius: 4px;
+  transition: background-color 0.15s ease;
+}
 </style>