Videos in posts span the column instead of a narrow strip at the left

A tall clip was 360px high at most (profile, thread) or sized to its own
width (feed), leaving most of the post blank. Now every inline video is
the column's width, up to three quarters of the screen tall, letterboxed.

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

2 files changed, 5 insertions, 4 deletions

diff --git a/src/features/messages.js b/src/features/messages.js
index 45098df..9b60414 100644
--- a/src/features/messages.js
+++ b/src/features/messages.js
@@ -5574,10 +5574,11 @@ export function messagesFeature(ctx) {
   // window unmounting the row and mounting it again, a quoted note loading.
   // Pinning the box alone left every one of those a muted restart.
   const unmutedClips = new Set();
-  // A feed box takes the clip's own shape when it's known, as wide as the
-  // column allows but never taller than three quarters of the screen.
+  // A feed box spans the column and takes the clip's own shape when it's
+  // known, never taller than three quarters of the screen; a tall clip sits
+  // in the middle of a black frame rather than in a strip at the left.
   const videoBoxStyle = (d) => d && d.width && d.height
-    ? `width:min(100%, calc(75vh * ${d.width} / ${d.height}));aspect-ratio:${d.width}/${d.height};max-height:none;object-fit:contain`
+    ? `width:100%;aspect-ratio:${d.width}/${d.height};max-height:75vh;object-fit:contain`
     : 'width:100%;aspect-ratio:16/9;object-fit:contain';
   function videoNode(url, { stable = false } = {}) {
     const loud = unmutedClips.has(url);
diff --git a/src/style.css b/src/style.css
index ec45314..6c5fee2 100644
--- a/src/style.css
+++ b/src/style.css
@@ -763,7 +763,7 @@ html.no-scroll { overflow: hidden; scrollbar-gutter: auto; }
 }
 .lightbox-x:hover { background: rgba(255, 255, 255, .24); }
 @keyframes lightbox-in { from { opacity: 0; } to { opacity: 1; } }
-.note-video { display: block; max-width: 100%; max-height: 360px; border-radius: 10px; margin-top: 6px; background: #000; }
+.note-video { display: block; width: 100%; height: auto; max-height: 75vh; object-fit: contain; border-radius: 10px; margin-top: 6px; background: #000; }
 /* a video plays by itself, muted, while it is on screen; the corner button
    turns the sound on (see autoplay in messages.js) */
 .note-video-box { position: relative; display: block; max-width: 100%; margin-top: 6px; }