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 {