Keep a post inside the window, and stop letterboxing it #2

2026-08-26T20:25:34Z

thatguygriff commented

2026-08-26 20:25:34 +00:00

On desktop a portrait video arrived with black bars all around it and sat partly below the fold, so you had to scroll to find what you had opened.

The bars were the figure, not the video. It carried the media's aspect ratio, so at the full width of the column a 720×1280 reel forced a box 1204px tall inside a 982px window — the video, capped at 78vh, floated in the middle with 438px of black above and below and 247px either side. The ratio now sits on the media itself, which sizes to its own proportions rather than being stretched to the column, and what space is left is card-coloured so it reads as page rather than as a border.

The cap is the window less the chrome around it. Deriving that from the layout is the obvious approach and does not work: the card is sized by its contents, so every percentage height inside resolves to auto and clamps nothing. Measured across the posts this serves, header + caption + footer come to 270–350px, so the cap subtracts 350 and the whole post fits. Smaller than it might be on a short window, but a video can be full-screened and a post you have to hunt for cannot.

Threads keep the looser cap and scroll, which a column of several posts was always going to do.

A pre-existing grid bug turned up while measuring. A cell takes its height from an aspect ratio, which a percentage height will not resolve against, and aspect-ratio: auto asks for the image's own ratio rather than none — so a portrait thumbnail rendered at twice the height of its cell and spilled out of it. Thumbnails fill their cell absolutely now.

viewport	before	after
1512×982	678×1204, 438px letterbox, 289px below fold	356×632, no letterbox, fully visible
1280×800	678×1204, 471px below fold	253×450, fully visible
1440×700	—	197×350, fully visible
390×844	already fine	unchanged, no letterbox

61 tests pass.

On desktop a portrait video arrived with black bars all around it and sat partly below the fold, so you had to scroll to find what you had opened. **The bars were the figure, not the video.** It carried the media's aspect ratio, so at the full width of the column a 720×1280 reel forced a box **1204px tall inside a 982px window** — the video, capped at 78vh, floated in the middle with 438px of black above and below and 247px either side. The ratio now sits on the media itself, which sizes to its own proportions rather than being stretched to the column, and what space is left is card-coloured so it reads as page rather than as a border. **The cap is the window less the chrome around it.** Deriving that from the layout is the obvious approach and does not work: the card is sized by its contents, so every percentage height inside resolves to `auto` and clamps nothing. Measured across the posts this serves, header + caption + footer come to 270–350px, so the cap subtracts 350 and the whole post fits. Smaller than it might be on a short window, but a video can be full-screened and a post you have to hunt for cannot. Threads keep the looser cap and scroll, which a column of several posts was always going to do. **A pre-existing grid bug turned up while measuring.** A cell takes its height from an aspect ratio, which a percentage height will not resolve against, and `aspect-ratio: auto` asks for the image's *own* ratio rather than none — so a portrait thumbnail rendered at twice the height of its cell and spilled out of it. Thumbnails fill their cell absolutely now. | viewport | before | after | | --- | --- | --- | | 1512×982 | 678×1204, 438px letterbox, 289px below fold | 356×632, no letterbox, fully visible | | 1280×800 | 678×1204, 471px below fold | 253×450, fully visible | | 1440×700 | — | 197×350, fully visible | | 390×844 | already fine | unchanged, no letterbox | 61 tests pass.

thatguygriff added 1 commit 2026-08-26 20:25:35 +00:00

Keep a post inside the window, and stop letterboxing it

CI / Typecheck, test, build (pull_request) Successful in 34s

Details

df50fa7e93

On a desktop a portrait video came with black bars all the way around and sat
partly below the fold, so you had to scroll to find the thing you had opened.

The bars were the figure, not the video. It carried the media's aspect ratio,
so at the full width of the column a 720x1280 reel forced a box 1204px tall
inside a 982px window, and the video -- capped at 78vh -- floated in the middle
of it with 438px of black above and below and 247px either side. The ratio now
goes on the media itself, which sizes to its own proportions instead of being
stretched to the column, and the background is the card's rather than black, so
what space is left reads as page instead of as a border.

The height cap is the window less the chrome around it. Deriving that from the
layout is the obvious approach and does not work: the card is sized by its
contents, so every percentage height inside resolves to auto and clamps
nothing. Measured across the posts this serves, the header, caption and footer
come to 270-350px, so the cap subtracts 350 and the whole post fits. Smaller
than it might be on a short window, but a video can be full-screened and a post
you have to hunt for cannot.

Threads keep the looser cap and scroll, which a column of several posts was
always going to do.

Grid thumbnails were quietly broken and the measuring turned it up: the cell
takes its height from an aspect ratio, which a percentage height will not
resolve against, and `aspect-ratio: auto` asks for the image's own ratio rather
than none, so a portrait thumbnail rendered at twice the height of its cell and
spilled out. They fill their cell absolutely now.

Verified at 1512x982, 1280x800, 1440x700 and 390x844: no letterboxing anywhere,
and the media sits above the fold on every one.

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

thatguygriff merged commit 361cdbd966 into main

2026-08-26 20:26:42 +00:00

thatguygriff deleted branch media-fits-viewport

2026-08-26 20:26:42 +00:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: Unsupervised/antisocial#2