diff options
| author | Adam Soltys <[email protected]> | 2026-10-04 09:07:47 -0700 |
|---|---|---|
| committer | Adam Soltys <[email protected]> | 2026-10-04 09:07:47 -0700 |
| commit | d5db8bf6226f2fe06a65eed05e706c80dd0d904c (patch) | |
| tree | 6c3b58cb651a0357ce5474d995b398ac6e413306 /src/style.css | |
| parent | 7421218e987b0053f1ddbefaddc2c9ecfd664954 (diff) | |
| download | coinosv3-d5db8bf6226f2fe06a65eed05e706c80dd0d904c.tar.gz coinosv3-d5db8bf6226f2fe06a65eed05e706c80dd0d904c.zip | |
Feed pictures uncropped: the column's width at their own shape, height-capped
The 3:4 crop for tall pictures cut the top and bottom off comics. Now
nothing is cropped; a picture is as wide as the column allows up to
min(560px, 70vh) tall, and only one taller than that narrows.
Co-Authored-By: Claude Opus 5.5 <[email protected]>
Claude-Session: https://claude.ai/code/session_011bvzKaZosXGHkigcGcSzAR
Diffstat (limited to 'src/style.css')
| -rw-r--r-- | src/style.css | 6 |
1 files changed, 3 insertions, 3 deletions
diff --git a/src/style.css b/src/style.css index a59a75d..ad2c7e8 100644 --- a/src/style.css +++ b/src/style.css @@ -660,9 +660,10 @@ html:has(#app .chat-card), body:has(#app .chat-card) { overflow: hidden; } .chat-row.dm .chat-time { font-size: 10px; color: var(--faint); margin-top: 2px; } /* 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; } +/* 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; } .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. */ @@ -917,7 +918,6 @@ 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 |