Tall videos fill the column with no side bars, up to the screen's height

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

3 files changed, 5 insertions, 5 deletions

diff --git a/src/features/messages.js b/src/features/messages.js
index 9b60414..2a1412e 100644
--- a/src/features/messages.js
+++ b/src/features/messages.js
@@ -5575,10 +5575,10 @@ export function messagesFeature(ctx) {
   // Pinning the box alone left every one of those a muted restart.
   const unmutedClips = new Set();
   // 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.
+  // known, never taller than the screen; only a clip taller than that sits
+  // in a black frame, rather than in a strip at the left.
   const videoBoxStyle = (d) => d && d.width && d.height
-    ? `width:100%;aspect-ratio:${d.width}/${d.height};max-height:75vh;object-fit:contain`
+    ? `width:100%;aspect-ratio:${d.width}/${d.height};max-height:100vh;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 6c5fee2..825332a 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; width: 100%; height: auto; max-height: 75vh; object-fit: contain; border-radius: 10px; margin-top: 6px; background: #000; }
+.note-video { display: block; width: 100%; height: auto; max-height: 100vh; 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; }
diff --git a/tools/feed-video-aspect-test.js b/tools/feed-video-aspect-test.js
index 214b977..6f646cb 100644
--- a/tools/feed-video-aspect-test.js
+++ b/tools/feed-video-aspect-test.js
@@ -103,7 +103,7 @@ try {
   check('a 3:4 clip, measured ahead, paints at 3:4 full width', ratio(b['tall.mp4']) === 0.75 && b['tall.mp4'].w > 300 && /aspect-ratio:360\/480/.test(b['tall.mp4'].style || ''), JSON.stringify(b['tall.mp4']));
   check('a 16:9 clip stays 16:9', Math.abs(ratio(b['wide.mp4']) - 1.78) < 0.02 && /aspect-ratio:640\/360/.test(b['wide.mp4'].style || ''), JSON.stringify(b['wide.mp4']));
   check('a clip whose post gives imeta dim paints at that shape, without waiting on the file', Math.abs(ratio(b['told.mp4']) - 0.56) < 0.02 && /aspect-ratio:1080\/1920/.test(b['told.mp4'].style || ''), JSON.stringify(b['told.mp4']));
-  check('...capped at three quarters of the screen height', b['told.mp4'] && b['told.mp4'].h <= Math.ceil(844 * 0.75) + 1, JSON.stringify(b['told.mp4']));
+  check('...full width, no taller than the screen', b['told.mp4'] && b['told.mp4'].w > 300 && b['told.mp4'].h <= 845, JSON.stringify(b['told.mp4']));
   check('a clip that will not load keeps the 16:9 box', /aspect-ratio:16\/9/.test(b['broken.mp4']?.style || ''), JSON.stringify(b['broken.mp4']));
   await sleep(1500);
   check('shapes are remembered on the device', await page.evaluate(() => (JSON.parse(localStorage.getItem('coinos-video-dims') || '[]')).length >= 3));