From 942e04c821e891223d9b7ccb3ca66bf8e9988d8d Mon Sep 17 00:00:00 2001
From: Eric Wagoner <ewagoner@gmail.com>
Date: Thu, 17 Sep 2026 21:11:48 -0400
Subject: [PATCH] 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    | 14 ++++++++++++++
 packages/web/src/SharePage.svelte |  4 ++++
 2 files changed, 18 insertions(+)

diff --git a/packages/web/src/Replay.svelte b/packages/web/src/Replay.svelte
index e5ca2cd..0188739 100644
--- a/packages/web/src/Replay.svelte
+++ b/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>
diff --git a/packages/web/src/SharePage.svelte b/packages/web/src/SharePage.svelte
index 68bb6fc..3e5ff3e 100644
--- a/packages/web/src/SharePage.svelte
+++ b/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;