The "Add Content" card listed available media as an icon plus a filename,
so the only way to tell two media items apart was to read near-identical
filenames. Images now render an actual thumbnail.
Previews are shown for every image type, not just JPEG: the library is a
mix of JPEG and PNG (the PDF/PPTX converter emits PNG), so a JPEG-only
rule would have left most items without a preview. Non-images keep the
existing emoji icon. A missing or unreadable file falls back to the icon
via onerror, and images are `loading="lazy"` since the list is scrollable.
This surfaced two layout bugs in the same card, both now fixed:
- .content-grid used bare `2fr 1fr`. A grid track has an automatic
min-content floor, so the long unbreakable media filenames forced the
track wider than the viewport — the page had a horizontal scrollbar
(scrollWidth 1475 in a 1185px viewport). minmax(0, ...) fixes it.
- Long names were truncated with ellipsis, which hides the distinguishing
part: media filenames differ at the END (..._slide_003.png). Names now
wrap with overflow-wrap: anywhere instead.
The row is flex-wrap so that on a narrow card the Add button drops to its
own line rather than squeezing the name.
Verified: 5/5 items render an <img> whose URL returns HTTP 200 (including
a nested edited_media/ JPEG), no element overlaps at 1000-1500px, and dark
mode picks up the theme variables.
ske087
7784da495b