The reel fits a phone: title on its own line, a smaller caption, controls that stay on screen

The shared replay page had no rules for a narrow screen: the reel's
header stacked into a column, the caption ran large, and the controls
ran off the right edge. Under 640px the title takes its own line with
the count and buttons beneath, the caption reads smaller, and the
controls wrap. The share page also pins its text size against
Safari's inflation.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Jm2auWk6RP71CjaAb4FMoG

packages/web/src/Replay.svelte

@@ -997,4 +997,18 @@
     font-size: 0.9rem;
   }
   .playpause { min-width: 3.4rem; }
+  /* A phone: the title takes its own line, the count and the buttons
+     share the next, the caption reads smaller, and the controls fit. */
+  @media (max-width: 640px) {
+    .replay { padding: 0.6rem 0.6rem 0.8rem; }
+    .replay-head { flex-wrap: wrap; gap: 0.4rem 0.6rem; }
+    .replay-title { flex-basis: 100%; font-size: 0.72rem; letter-spacing: 0.1em; }
+    .replay-count { font-size: 0.72rem; }
+    .replay-eyes { white-space: nowrap; }
+    .replay-caption { font-size: 0.72rem; padding: 0.45rem 0.55rem; gap: 0.45rem; }
+    .caption-face { width: 36px; height: 36px; }
+    .caption-status { max-width: 45%; }
+    .replay-controls { gap: 0.35rem; flex-wrap: wrap; }
+    .replay-controls button { min-width: 2.3rem; padding: 0.3rem 0.45rem; font-size: 0.85rem; }
+  }
 </style>

packages/web/src/SharePage.svelte

@@ -78,6 +78,10 @@
 
 <style>
   .share-page {
+    /* Safari's text inflation has no business here: the page is laid
+       out for the phone already. */
+    -webkit-text-size-adjust: 100%;
+    text-size-adjust: 100%;
     min-height: 100vh;
     background: #171a20;
     color: #d8d2c0;