From dbf89cd5e2a760021331631c70af65dc938a0c55 Mon Sep 17 00:00:00 2001
From: Mitchell-Johnson <mitchelljoho@gmail.com>
Date: Fri, 23 Oct 2026 23:52:35 -0700
Subject: [PATCH] files: on a phone the player's time sits above the seek bar

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 web/src/Player.tsx | 3 ++-
 web/src/styles.css | 7 +++++++
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/web/src/Player.tsx b/web/src/Player.tsx
index a336700..150b0d3 100644
--- a/web/src/Player.tsx
+++ b/web/src/Player.tsx
@@ -340,6 +340,7 @@ export default function Player({ path, sudo }: { path: string; sudo: boolean; na
       {vr && open && chrome && !menu && time < 8 && !err && <div className="vp-hint">Drag to look around · scroll or pinch to zoom</div>}
 
       <div className="vp-bottom">
+        <span className="vp-time above">{clock(shown)} / {clock(dur)}</span>
         <div className="vp-seek" style={{ ['--p' as string]: dur ? `${(shown / dur) * 100}%` : '0%', ['--b' as string]: dur ? `${(buffered / dur) * 100}%` : '0%' }}>
           <input ref={seekBar} type="range" min={0} max={dur || 1} step={0.1} value={shown} aria-label="Seek"
             onChange={(e) => { setScrub(Number(e.target.value)); poke() }} />
@@ -348,7 +349,7 @@ export default function Player({ path, sudo }: { path: string; sudo: boolean; na
           <button className="vp-icon" onClick={toggle} aria-label={paused ? 'Play' : 'Pause'}>{paused ? <I d={PLAY} fill /> : <I d={PAUSE} />}</button>
           <button className="vp-icon" onClick={() => seekBy(-5)} aria-label="Back 5 seconds" title="Back 5 seconds"><Skip back /></button>
           <button className="vp-icon" onClick={() => seekBy(5)} aria-label="On 5 seconds" title="On 5 seconds"><Skip /></button>
-          <span className="vp-time">{clock(shown)} / {clock(dur)}</span>
+          <span className="vp-time inrow">{clock(shown)} / {clock(dur)}</span>
           <span className="spacer" />
           {vr && canMotion() && (
             <button className={`vp-icon${motion ? ' on' : ''}`} aria-label="Look around by moving the phone" aria-pressed={motion}
diff --git a/web/src/styles.css b/web/src/styles.css
index 057ea0a..dafcde4 100644
--- a/web/src/styles.css
+++ b/web/src/styles.css
@@ -964,3 +964,10 @@ pre.diff .add { color: var(--ok); background: color-mix(in srgb, var(--ok) 12%,
 .updot { margin-left: 6px; font-size: 11px; font-weight: 700; }
 .updot.behind { color: var(--s2); } .updot.unknown { color: var(--muted); }
 
+
+/* a phone: the time goes above the seek bar, so the buttons fit in one row */
+.vp-time.above { display: none; }
+@media (max-width: 560px) {
+  .vp-time.above { display: block; padding: 0 10px 2px; }
+  .vp-time.inrow { display: none; }
+}