From 9cef505c9ee0565e7dabc193b3d52f3a8ef23331 Mon Sep 17 00:00:00 2001 From: Adam Soltys Date: Sat, 3 Oct 2026 22:05:05 -0700 Subject: 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 Claude-Session: https://claude.ai/code/session_011bvzKaZosXGHkigcGcSzAR --- src/features/messages.js | 10 ++++++++-- src/style.css | 2 ++ 2 files changed, 10 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 diff --git a/src/style.css b/src/style.css index b871bd4..a59a75d 100644 --- a/src/style.css +++ b/src/style.css @@ -662,6 +662,7 @@ html:has(#app .chat-card), body:has(#app .chat-card) { overflow: hidden; } /* Profile note feed: inline images stay contained, links wrap. */ .note-img { display: block; max-width: 100%; max-height: 320px; border-radius: 10px; margin-top: 6px; object-fit: contain; } .note-img.clickable { cursor: zoom-in; } +.note-img.tall { width: 100%; max-width: 330px; height: auto; max-height: none; aspect-ratio: 3 / 4; object-fit: cover; } /* The row under a post: reply, boost, quote, react, zap — spread across the post's full width so each is a comfortable target, quiet until one carries a count or you've used it. */ @@ -916,6 +917,7 @@ html.no-scroll { overflow: hidden; scrollbar-gutter: auto; } .quote-card .note-text { font-size: 14px; } .quote-name { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .quote-card .note-img { max-height: 220px; } +.quote-card .note-img.tall { max-width: 165px; } .quote-card .yt-embed { margin-top: 4px; } /* A YouTube link, shown as the video it is: the still, a play button, and a -- cgit v1.2.3