From 6ef04d9a9209cddfa207c9631b9a2952bb37f066 Mon Sep 17 00:00:00 2001 From: Claude Date: Tue, 18 Aug 2026 12:26:39 +0000 Subject: [PATCH] feat(teleprompter): let the cue arrow use the margin it has The text width option leaves a wide gutter which the indicator was barely touching. It is now sized against that gutter rather than against the viewport, so it fills a useful part of the space beside the line: roughly three times the area at the default width, and it grows with the font. Sizing it from the gutter also fixes a case the fixed width did not handle. A column set to the full width leaves nowhere for the arrow to go, and it now collapses instead of being drawn over the first word. Prompted by a look at how Ikan's PrompterPro presents the same control, where the eyeline indicator is a large arrow sitting clear of the script. Co-Authored-By: Claude Opus 5 Claude-Session: https://claude.ai/code/session_01Cb8RVPNQ2ETPJxdy4b8CHf --- .../src/views/teleprompter/Teleprompter.scss | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) diff --git a/apps/client/src/views/teleprompter/Teleprompter.scss b/apps/client/src/views/teleprompter/Teleprompter.scss index ca97c5a1b..505703598 100644 --- a/apps/client/src/views/teleprompter/Teleprompter.scss +++ b/apps/client/src/views/teleprompter/Teleprompter.scss @@ -162,12 +162,21 @@ position: absolute; top: 0; bottom: 0; - /* sits in the gutter beside the column, never over the words */ - right: calc(100% + 0.35em); - width: 0.45em; background: $accent-color; clip-path: polygon(0 0, 100% 50%, 0 100%); + /* em here is the script's own size, so the arrow grows with the text */ font-size: var(--tp-font-size); + + /** + * The text width option leaves a gutter on each side, and the arrow is sized + * against it rather than against the viewport: it fills a good part of the + * space it has, and it cannot land on the words when the column is widened. + * A column at the full width leaves no gutter and no arrow, which is the + * honest outcome, since there is nowhere for it to go. + */ + --tp-gutter: max(0px, calc((100vw - 100%) / 2)); + width: min(1.2em, calc(var(--tp-gutter) * 0.6)); + right: calc(100% + var(--tp-gutter) * 0.2); } .teleprompter__controls {