Feed: a tall picture fills a 3:4 frame as wide as the column, not a skinny strip

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

1 files changed, 8 insertions, 2 deletions

diff --git a/src/features/messages.js b/src/features/messages.js
index 9c4b50f..e592827 100644
--- a/src/features/messages.js
+++ b/src/features/messages.js
@@ -6687,6 +6687,7 @@ export function messagesFeature(ctx) {
   // opens the thread — not on the picture.
   function onPicture(e) {
     const el = e.currentTarget;
+    if (el.classList.contains('tall')) return true; // cropped to fill its frame: all picture
     const r = el.getBoundingClientRect();
     const nw = el.naturalWidth, nh = el.naturalHeight;
     if (!nw || !nh || !r.width || !r.height) return true;
@@ -6705,11 +6706,16 @@ export function messagesFeature(ctx) {
       // tap it to see it properly — a 320px-tall crop of someone's
       // photograph is a thumbnail, not the picture they posted
       const known = size || mediaReady.get(url);
+      // A tall picture (a phone screenshot, a 9:16 wallpaper) fitted inside
+      // the 320px box was a skinny strip with the column empty beside it. It
+      // gets a 3:4 frame as wide as the column allows instead, cropped to
+      // fill it; a tap still opens the whole thing.
+      const tall = !!(known && known.width && known.height / known.width > 4 / 3);
       return h('img', {
-        src: mediaSrc(url, known), class: 'note-img clickable', loading: feedPaint || known ? 'eager' : 'lazy', alt: label || '',
+        src: mediaSrc(url, known), class: 'note-img clickable' + (tall ? ' tall' : ''), loading: feedPaint || known ? 'eager' : 'lazy', alt: label || '',
         decoding: known && known.thumb ? 'sync' : undefined, // a few-ms decode: paint it with the page
         width: size?.width, height: size?.height,
-        style: size ? 'height:auto;aspect-ratio:' + size.width + '/' + size.height : undefined,
+        style: tall ? undefined : size ? 'height:auto;aspect-ratio:' + size.width + '/' + size.height : undefined,
         onClick: (e) => { if (!onPicture(e)) return; e.stopPropagation(); ctx.openImage && ctx.openImage(url); },
         // a picture we were TOLD was a picture and which won't load leaves
         // nothing behind — the alt text is already in the sentence above it