Stop the listing thumbnails collapsing to a sliver

[ssavutu]

The thumbnails in the articles list render as a tall 4px sliver of cropped photo instead of a 48×40 image, as spotted after #233.

Cause

Tailwind's preflight puts max-width: 100% on every img. That makes the thumbnail's min-content width zero, so when auto table layout needs space it takes it from the only column that will yield. h-10 keeps the height, object-cover crops the width, and what is left is a sliver.

w-12 is a preference in that algorithm, not a floor.

It has presumably always been one badge away from happening. Adding the Featured badge in #231 spent the remaining slack, so a row carrying both badges squeezes the column for the whole table — including rows carrying neither, which is why every thumbnail is affected and not just the flagged ones.

Confirmed, not guessed

Reproduced in isolation with the same markup and Tailwind's preflight rule. At a width where the author names wrap over three lines — exactly what the reported screenshot shows — the column collapses to nothing:

without a floor          with min-w-[3rem]

[ ]  Rico Nasty…         [IMG]  Rico Nasty…
     BREAKING FEATURED          BREAKING FEATURED
[ ]  Academy of…         [IMG]  Academy of…
     BREAKING                   BREAKING

The same page with min-w-[3rem] holds the thumbnails at full size under identical pressure.

Fix

min-w-[3rem] on the image and min-w-[4rem] on its column header. Verified that both arbitrary classes actually compile into the bundle (min-w-\[3rem\]{min-width:3rem}) rather than assuming JIT picked them up.

The placeholder shown for an article with no image never had the problem: a div's fixed width already is its min-content width. Only the img is vulnerable, because only it carries max-width: 100%.

Testing

tsc --noEmit, eslint, vitest (20 tests) and a production vite build all pass. No server change.

Not fixed here

With both badges present the title truncates early (Rico Nasty to hea…) because the cell is capped at max-w-xs and the badges are shrink-0. That is a legibility judgement rather than a rendering bug, so it is left alone — say the word and it can be widened or the badges moved under the title.

🤖 Generated with Claude Code

https://claude.ai/code/session_01L4qBhBdQto1yNp1zP7VLYc