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 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Cb8RVPNQ2ETPJxdy4b8CHf

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 {