Media grids: one tile for a clip uploaded twice, and a picture that won't load stays out

- Videos: one person's clips of one size to the byte are one clip. Beatbox
  Serenade posted the same video as a note and as a video event, each
  upload a fresh Blossom hash, so neither the file nor the words matched.
  Only a size the post or the host states counts (a bitrate x duration
  guess is marked sizeGuess and never matched).
- Images: a picture whose load failed was hidden by a class the next
  repaint rewrote, so the broken-picture glyph came back (a deleted
  nostr.media file in #artstr). Failed pictures are now remembered for the
  session and left out of the grid.
- A tile fetching its own frame froze the whole tile against repaints, so
  one built for the one-to-a-row layout never got its --ar in justified rows
  (zero width). Only the player and its stand-ins are frozen now; the
  render draws the cost badge itself. Tile pictures no longer size their
  tile (a frame-grab <video>'s 320px stretched its row).
- Test fixtures that served one file under several names (or one imeta
  size for every clip) now differ per clip.

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

1 files changed, 3 insertions, 0 deletions

diff --git a/src/style.css b/src/style.css
index 61d6f01..275bb59 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1548,6 +1548,9 @@ body::after {
 .media-grid.justified { display: flex; flex-wrap: wrap; --row-h: 140px; }
 .media-grid.justified .media-tile { aspect-ratio: var(--ar); flex: var(--ar) 1 calc(var(--ar) * var(--row-h)); min-width: 0; }
 .media-grid.justified::after { content: ''; flex: 1000 1 0; }
+/* the picture fills the tile without sizing it: a frame-grab <video>'s own
+   320px would widen its tile, and the row's height with it */
+.media-grid.justified .media-tile > img, .media-grid.justified .media-tile > video { position: absolute; inset: 0; }
 @media (max-width: 600px) { .media-grid.justified { --row-h: 100px; } }
 .media-tile img, .media-tile video { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
 .media-tile.broken { display: none; }