LotusGuild/cinny
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

perf(media): center-top focal point on cover-fit thumbnails (P5-6)

Browse Source 
Adds objectPosition:'center top' to all cover-fit thumbnail surfaces so
portrait images show faces/subjects instead of the center-slice when
the 600px AttachmentBox height cap forces cropping.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Jared Vititoe
2026-06-18 18:33:36 -04:00
parent ffa490e767
commit 2b5c6fd606
4 changed files with 6 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
LOTUS_TODO.md
+3 -2
View File
@@ -283,10 +283,11 @@ Themes:
**What:** Use `IntersectionObserver` to trigger media decryption and loading only when components approach the viewport.
**Approach:** Reduce initial memory footprint and improve timeline load times by deferring decryption of images/videos until they are visible.
### [ ] P5-6 · Context-Aware Thumbnail Previews
### [x] P5-6 · Context-Aware Thumbnail Previews ⚠️ UNTESTED
**What:** Enhance thumbnail rendering in the timeline for consistent, polished aesthetics.
**Approach:** Use CSS `object-fit: cover` with improved focal-point centering within `ThumbnailContent` to prevent media stretching or awkward aspect-ratio cropping.
**Approach:** Use CSS `object-fit: cover` with improved focal-point centering within `ThumbnailContent` to prevent media stretching or awkward aspect-ratio cropping.
**Fix Applied:** Added `objectPosition: 'center top'` to: (1) `media.css.ts` → `Image` component (timeline images), (2) video thumbnail inline style in `RenderMessageContent.tsx`, (3) `GalleryTile` `<img>` in `MediaGallery.tsx`. Full-size viewers retain `objectFit: 'contain'` — no change. `objectPosition: 'center top'` prevents face/subject cropping on tall portrait images capped at 600px by `AttachmentBox`.
---