A clip's moments sit on its bar, just under the line (under the waveform for audio) instead of floating above it, and a reply made at a moment shows as its author's face, not ↩ (the pager's bar and the pop-up too)

Co-Authored-By: Claude Opus 5.5 <[email protected]>
Claude-Session: https://claude.ai/code/session_01QjVvE4YAcK3AGwV7kZXeN4

2 files changed, 13 insertions, 3 deletions

diff --git a/src/features/messages.js b/src/features/messages.js
index 8481bcd..ca560c3 100644
--- a/src/features/messages.js
+++ b/src/features/messages.js
@@ -4543,8 +4543,10 @@ export function messagesFeature(ctx) {
     .sort((a, b) => a.moment.seconds - b.moment.seconds)
     .map(x => ({ ...x, text: displayName(x.ev.kind === 9735 || x.ev.kind === 9737 ? zapperOf(x.ev) || x.ev.pubkey : x.ev.pubkey) + ' · ' + String(x.text || x.icon).slice(0, 240) }));
   // how a moment shows on a bar: a reaction as its emoji (a :code: as its
-  // picture, from the reaction's own tag), a zap ⚡, a reply ↩
+  // picture, from the reaction's own tag), a zap ⚡, a reply as its
+  // author's face
   function momentGlyph(x) {
+    if (x.ev.kind === 1 || x.ev.kind === 1111) return avatar(x.ev.pubkey, 'chat-avatar media-mark-face', false);
     if (x.ev.kind !== 7) return x.icon;
     const code = shortcodeOf(x.ev.content);
     const tag = code && x.ev.tags.find(t => t[0] === 'emoji' && t[1] === code && t[2]);
diff --git a/src/style.css b/src/style.css
index 460b584..e550f25 100644
--- a/src/style.css
+++ b/src/style.css
@@ -2018,7 +2018,7 @@ html:has(.call-overlay:not(.call-min)) { overflow: hidden; scrollbar-gutter: aut
 
 /* A post's audio/video timeline: the waveform (audio), and what was said,
    reacted or zapped at a moment, sitting over the bar at that moment. */
-.media-timeline { padding: 24px 0 8px; white-space: normal; color: var(--text); }
+.media-timeline { padding: 8px 0; white-space: normal; color: var(--text); }
 .note-video-box .media-timeline:not(.has-marks) { display: none; }
 .media-time { font-variant-numeric: tabular-nums; }
 .media-seek { position: relative; height: 42px; --played: 0%; }
@@ -2030,12 +2030,20 @@ html:has(.call-overlay:not(.call-min)) { overflow: hidden; scrollbar-gutter: aut
 .has-wave .media-wave::after { content: ''; position: absolute; inset: 0 0 0 var(--played); background: var(--bg, #fff); opacity: .55; pointer-events: none; }
 .media-seek input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: .01; cursor: pointer; }
 .media-seek:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
-.media-marks { position: absolute; left: 0; right: 0; top: -22px; height: 22px; pointer-events: none; }
+/* the marks hang just under the line, at their moment (a plain bar: inside
+   its touch strip); under a waveform, below it */
+.media-marks { position: absolute; left: 0; right: 0; top: 24px; height: 18px; pointer-events: none; }
+.has-wave .media-marks { top: 100%; height: 22px; }
+.media-seek.has-wave:has(.media-mark) { margin-bottom: 22px; }
+.media-mark { bottom: auto; top: 0; }
 .media-mark, .mp-mark {
   position: absolute; bottom: 0; transform: translateX(-50%); padding: 0 2px; margin: 0; border: 0; background: none;
   font-size: 16px; line-height: 1; cursor: pointer; pointer-events: auto;
 }
 .media-mark .cemoji, .mp-mark .cemoji { width: 20px; height: 20px; vertical-align: bottom; }
+.media-mark-face { display: block; width: 20px !important; height: 20px !important; min-width: 0; font-size: 8px; border-radius: 50%; }
+.mp-mark .media-mark-face { width: 26px !important; height: 26px !important; box-shadow: 0 0 0 1.5px #fff; }
+.mp-pop .media-mark-face { width: 36px !important; height: 36px !important; box-shadow: 0 0 0 2px #fff; }
 /* the pager's: above its seek bar, there when the bar is */
 .mp-marks { position: absolute; left: 0; right: 0; bottom: 10px; height: 26px; pointer-events: none; }
 .mp-mark { font-size: 20px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .6)); }