From c68b73c8c15f8418fa924dadfe7ec301f43e5ad1 Mon Sep 17 00:00:00 2001
From: sudacode <suda@sudacode.com>
Date: Mon, 28 Sep 2026 19:53:38 -0700
Subject: [PATCH] fix(overlay): thin centered trim handles and label-free
 subtitle boundaries in timing review (#274)

---
 changes/timing-review-thin-handles.md      |  5 ++
 docs-site/anki-integration.md              |  2 +-
 src/renderer/index.html                    |  6 --
 src/renderer/modals/media-timing-review.ts |  4 +-
 src/renderer/style.css                     | 67 +++++++---------------
 5 files changed, 28 insertions(+), 56 deletions(-)
 create mode 100644 changes/timing-review-thin-handles.md

diff --git a/changes/timing-review-thin-handles.md b/changes/timing-review-thin-handles.md
new file mode 100644
index 00000000..c5b08e0e
--- /dev/null
+++ b/changes/timing-review-thin-handles.md
@@ -0,0 +1,5 @@
+type: fixed
+area: overlay
+
+- Media timing review trim handles are now thin lines centered on the clip edge, so it's clear where the clip starts and ends and less of the waveform is covered.
+- Original subtitle boundaries use orange bars without text tags, leaving the waveform unobstructed.
diff --git a/docs-site/anki-integration.md b/docs-site/anki-integration.md
index 785e9aae..3c26baf5 100644
--- a/docs-site/anki-integration.md
+++ b/docs-site/anki-integration.md
@@ -122,7 +122,7 @@ Media settings apply to the next card without a restart.
 
 With `media.reviewTiming` on, SubMiner pauses before making media for word, sentence, and audio cards and opens a review dialog. You can also toggle it for the current session with **Review Media Timing** in the runtime options palette (`Ctrl/Cmd+Shift+O`). Clipboard updates and stats-dashboard mining skip the review.
 
-The dialog shows the clip over a speech waveform. When the waveform loads, an untouched clip end moves back to just after the last speech in the line. The Line end rail still marks the subtitle's own end.
+The dialog shows the clip over a speech waveform. When the waveform loads, an untouched clip end moves back to just after the last speech in the line. The orange bars still mark the subtitle's original start and end.
 
 | Action                   | How                                                                   |
 | ------------------------ | --------------------------------------------------------------------- |
diff --git a/src/renderer/index.html b/src/renderer/index.html
index 4ec0f0f3..fb6a8aa3 100644
--- a/src/renderer/index.html
+++ b/src/renderer/index.html
@@ -393,12 +393,6 @@
                   <span class="media-timing-review-original-boundary is-start"></span>
                   <span class="media-timing-review-original-boundary is-end"></span>
                 </div>
-                <span class="media-timing-review-original-label is-start" aria-hidden="true">
-                  Line start
-                </span>
-                <span class="media-timing-review-original-label is-end" aria-hidden="true">
-                  Line end
-                </span>
                 <div
                   id="mediaTimingReviewSelectedRange"
                   class="media-timing-review-selected-range"
diff --git a/src/renderer/modals/media-timing-review.ts b/src/renderer/modals/media-timing-review.ts
index 52a755b6..68bcaf8a 100644
--- a/src/renderer/modals/media-timing-review.ts
+++ b/src/renderer/modals/media-timing-review.ts
@@ -449,8 +449,8 @@ export function createMediaTimingReviewModal(
   }
 
   /**
-   * Moves an untouched clip end back to where the line's dialogue ends. The Line end
-   * rail keeps marking the subtitle timing, and Reset restores it.
+   * Moves an untouched clip end back to where the line's dialogue ends. The orange
+   * end bar keeps marking the subtitle timing, and Reset restores it.
    */
   function trimTrailingSilence(peaks: readonly number[]): void {
     if (!payload || !trailingTrimPending || previewPlaying || previewRequest.isInFlight()) {
diff --git a/src/renderer/style.css b/src/renderer/style.css
index 5c0620d9..57631067 100644
--- a/src/renderer/style.css
+++ b/src/renderer/style.css
@@ -1763,34 +1763,6 @@ body:focus-visible,
   right: 0;
 }
 
-.media-timing-review-original-label {
-  position: absolute;
-  z-index: 7;
-  padding: 3px 5px;
-  border: 1px solid color-mix(in srgb, var(--ctp-crust) 35%, transparent);
-  border-radius: 4px;
-  background: var(--ctp-peach);
-  box-shadow: 0 2px 6px color-mix(in srgb, var(--ctp-crust) 55%, transparent);
-  color: var(--ctp-crust);
-  font-size: 8px;
-  font-weight: 800;
-  letter-spacing: 0.06em;
-  line-height: 1;
-  pointer-events: none;
-  white-space: nowrap;
-  text-transform: uppercase;
-}
-
-.media-timing-review-original-label.is-start {
-  top: 5px;
-  left: calc(var(--original-start) + 7px);
-}
-
-.media-timing-review-original-label.is-end {
-  right: calc(100% - var(--original-end) + 7px);
-  bottom: 5px;
-}
-
 .media-timing-review-track.is-loading::after {
   position: absolute;
   z-index: 2;
@@ -1856,61 +1828,62 @@ body:focus-visible,
   }
 }
 
+/* A thin line centered on the clip edge, so the line itself is the trim boundary. */
 .media-timing-review-handle {
   position: absolute;
   z-index: 6;
   top: 0;
   bottom: 0;
-  width: 14px;
-  border: 1px solid var(--ctp-teal);
-  background: linear-gradient(
-    180deg,
-    var(--ctp-teal),
-    color-mix(in srgb, var(--ctp-teal) 74%, var(--ctp-crust))
-  );
+  width: 3px;
+  background: var(--ctp-teal);
   cursor: ew-resize;
   touch-action: none;
+  transform: translateX(-50%);
   transition: box-shadow 130ms ease;
 }
 
-/* Widens the grab area past the visible bracket without moving the clip edge. */
+/* Widens the grab area past the visible line without moving the clip edge. */
 .media-timing-review-handle::before {
   position: absolute;
-  inset: 0 -7px;
+  inset: 0 -8px;
   content: '';
 }
 
+/* Grip knob, symmetric about the line so it never reads as a separate edge. */
 .media-timing-review-handle::after {
   position: absolute;
   top: 50%;
   left: 50%;
-  width: 6px;
-  height: 18px;
+  width: 7px;
+  height: 16px;
   content: '';
-  border-inline: 1px solid color-mix(in srgb, var(--ctp-crust) 55%, transparent);
+  border: 1px solid color-mix(in srgb, var(--ctp-crust) 55%, transparent);
+  border-radius: 4px;
+  background: var(--ctp-teal);
   transform: translate(-50%, -50%);
+  pointer-events: none;
 }
 
 .media-timing-review-handle-start {
   left: var(--selection-start);
-  border-radius: 5px 0 0 5px;
 }
 
 .media-timing-review-handle-end {
   left: var(--selection-end);
-  border-radius: 0 5px 5px 0;
-  transform: translateX(-100%);
 }
 
 .media-timing-review-handle:hover {
-  box-shadow: 0 0 16px color-mix(in srgb, var(--ctp-teal) 60%, transparent);
+  box-shadow: 0 0 10px color-mix(in srgb, var(--ctp-teal) 70%, transparent);
 }
 
 .media-timing-review-handle:focus-visible {
   outline: 2px solid transparent;
-  box-shadow:
-    inset 0 0 0 2px var(--ctp-yellow),
-    0 0 16px color-mix(in srgb, var(--ctp-yellow) 55%, transparent);
+  background: var(--ctp-yellow);
+  box-shadow: 0 0 12px color-mix(in srgb, var(--ctp-yellow) 60%, transparent);
+}
+
+.media-timing-review-handle:focus-visible::after {
+  background: var(--ctp-yellow);
 }
 
 .media-timing-review-expand-row span {