Changeset 38120c7 in Klonkt for src/assets

Timestamp:

06/30/2026 11:38:24 PM (2 months ago)

Author:

roboburr <roboburr@…>

Branches:

main

Children:

2a58d76

Parents:

86fa2d2

Message:

fix(feed): video covers fill the square thumbnail (object-fit:cover), centered — incl. desktop

The desktop list-cover rule was .post-list-cover img (img only), so a federated <video> cover was
unstyled = rendered at its intrinsic size (e.g. 640x360), overflowing the square slot from the
top-left. Add video to that rule so it gets width/height:100% + object-fit:cover + center (fill the
square, keep aspect, crop the overflow). Reverted the earlier object-fit:contain — the ask is cover,
not letterbox. style.css buster 65 -> 66.

Co-Authored-By: Claude <noreply@…>

File:

• src/assets/css/style.css (modified) (2 diffs)

src/assets/css/style.css

@@ -1937 +1937 @@
         color-mix(in srgb, var(--accent, #888) 6%, var(--paper-2, var(--paper))) 100%);
 }
-.post-list-cover img {
+.post-list-cover img, .post-list-cover video {
     width: 100%; height: 100%;
-    object-fit: cover;
+    object-fit: cover;                 /* fill the square, keep aspect, crop the overflow, centered */
+    object-position: center;
     display: block;
     background-color: #fff;            /* transparent logos sit on white once loaded */
@@ -2401 +2402 @@
 .grid-tile-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; transition: opacity .4s ease; }
 .grid-tile-img.is-loading { opacity: 0; }
-/* A video cover keeps its own aspect ratio inside the square tile (centered, letterboxed) instead
-   of zoom-cropping a wide video to fill. Images stay object-fit:cover. */
-video.grid-tile-img { object-fit: contain; background: var(--paper-2, #0a0e1a); }
 .grid-tile:hover { transform: scale(0.98); }
 .grid-tile-overlay {