diff options
| author | Adam Soltys <[email protected]> | 2026-10-04 09:08:44 -0700 |
|---|---|---|
| committer | Adam Soltys <[email protected]> | 2026-10-04 09:08:44 -0700 |
| commit | 630b14ef0483ff49a17993a16556047dff80305c (patch) | |
| tree | 3234c2cbaf7802f480429b23189ae0211832a8c6 /src | |
| parent | d5db8bf6226f2fe06a65eed05e706c80dd0d904c (diff) | |
| download | coinosv3-630b14ef0483ff49a17993a16556047dff80305c.tar.gz coinosv3-630b14ef0483ff49a17993a16556047dff80305c.zip | |
Feed pictures: a height-capped one's frame narrows with it (no empty bands)
Co-Authored-By: Claude Opus 5.5 <[email protected]>
Claude-Session: https://claude.ai/code/session_011bvzKaZosXGHkigcGcSzAR
Diffstat (limited to 'src')
| -rw-r--r-- | src/features/messages.js | 2 | ||||
| -rw-r--r-- | src/style.css | 7 |
2 files changed, 5 insertions, 4 deletions
diff --git a/src/features/messages.js b/src/features/messages.js index 09e4c95..0a0a536 100644 --- a/src/features/messages.js +++ b/src/features/messages.js @@ -6731,7 +6731,7 @@ export function messagesFeature(ctx) { src: mediaSrc(url, known), class: 'note-img clickable', 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: size ? 'height:auto;aspect-ratio:' + size.width + '/' + size.height + ';--ar:' + (size.width / size.height).toFixed(4) : 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 ad2c7e8..bfebff7 100644 --- a/src/style.css +++ b/src/style.css @@ -661,8 +661,9 @@ html:has(#app .chat-card), body:has(#app .chat-card) { overflow: hidden; } /* Profile note feed: inline images stay contained, links wrap. */ /* never cropped: the column's width at the picture's own shape, up to a - height a tall one can't grief the feed past (it narrows instead) */ -.note-img { display: block; max-width: 100%; max-height: min(560px, 70vh); border-radius: 10px; margin-top: 6px; object-fit: contain; } + height a tall one can't grief the feed past (it narrows instead: --ar, + its width/height, keeps the frame to the picture) */ +.note-img { display: block; max-width: min(100%, calc(min(560px, 70vh) * var(--ar, 100))); max-height: min(560px, 70vh); border-radius: 10px; margin-top: 6px; object-fit: contain; } .note-img.clickable { cursor: zoom-in; } /* 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 @@ -917,7 +918,7 @@ html.no-scroll { overflow: hidden; scrollbar-gutter: auto; } .attach-btn.on { color: var(--accent-ink); border-color: var(--accent); } .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 { max-height: 220px; max-width: min(100%, calc(220px * var(--ar, 100))); } .quote-card .yt-embed { margin-top: 4px; } /* A YouTube link, shown as the video it is: the still, a play button, and a |