fix(teleprompter): keep the transport upright, cap the size on small screens

Two things a look at the view on real screen sizes turned up.

On a mirrored rig the transport was mirrored with the script: reversed
icons, reversed order, the speed readout backwards. The flip exists to
pre-compensate for a beam splitter, so it belongs to the script; these
buttons are read off the screen itself by whoever is driving. The navigation
menu and the help dialog were already outside the flip, so the transport was
the only piece of chrome that turned over. Applying the same flip a second
time cancels it.

The font size is now a ceiling rather than a fixed value. It is carried in
the link, so a prompter set up on a stage screen and opened on a phone was
showing three words to a line; it now caps against the viewport, which only
takes effect below about 650px. The cap is applied once, where the size is
derived, so the cue arrow and the reading line still measure a single line.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Cb8RVPNQ2ETPJxdy4b8CHf

apps/client/src/views/teleprompter/Teleprompter.scss

@@ -1,15 +1,25 @@
 @use '@/theme/viewerDefs' as *;
 
 /**
- * The --tp-* custom properties are all set by Teleprompter.tsx from the parsed
+ * The --tp-* custom properties come from Teleprompter.tsx, set from the parsed
  * view options, so they carry no fallbacks here. A fallback would be a second
- * copy of a default that nothing reaches and nothing keeps in step.
+ * copy of a default that nothing reaches and nothing keeps in step. The one
+ * exception is --tp-font-size, derived below from the size the view was given.
  */
 
 .teleprompter {
   --tp-flip-x: 1;
   --tp-flip-y: 1;
 
+  /**
+   * The configured size is a ceiling rather than a fixed value. A prompter set
+   * up on a stage screen keeps its size in the link it is shared as, and the
+   * same link opened on a phone would otherwise leave three words to a line.
+   * The cap only bites below about 650px of viewport, so a rig set up on
+   * anything laptop sized or larger reads exactly what it was given.
+   */
+  --tp-font-size: min(var(--tp-configured-font-size), 8vw);
+
   position: relative;
   height: 100dvh;
   width: 100%;
@@ -183,7 +193,16 @@
   position: absolute;
   bottom: min(2vh, 16px);
   left: 50%;
-  transform: translateX(-50%);
+
+  /**
+   * Applying the view's own flip a second time cancels it, which keeps the
+   * transport the right way round on a mirrored rig. The flip exists to
+   * pre-compensate for a beam splitter, so it belongs to the script; the
+   * operator reads these buttons off the screen itself, and mirrored icons in
+   * a mirrored order are unusable. The navigation menu and the help dialog are
+   * already outside the flip for the same reason, this is the odd one in.
+   */
+  transform: translateX(-50%) scale(var(--tp-flip-x), var(--tp-flip-y));
 
   display: flex;
   align-items: center;

apps/client/src/views/teleprompter/Teleprompter.tsx

@@ -142,7 +142,7 @@ function Teleprompter({ rundown, rundownMetadata, customFields }: TeleprompterDa
   const effectiveFlip = composeFlip(live.flipH, live.flipV, isMirrored);
 
   const viewStyles = {
-    '--tp-font-size': `${live.fontSize}px`,
+    '--tp-configured-font-size': `${live.fontSize}px`,
     '--tp-line-height': options.lineHeight,
     '--tp-text-width': `${options.textWidth}%`,
     // unitless, so the stylesheet can scale it by 1% against the view height for