diff --git a/LOTUS_TODO.md b/LOTUS_TODO.md
index 020c82cc9..c3f5e8a31 100644
--- a/LOTUS_TODO.md
+++ b/LOTUS_TODO.md
@@ -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` `
` 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`.
---
diff --git a/src/app/components/RenderMessageContent.tsx b/src/app/components/RenderMessageContent.tsx
index 5033d26ff..772deefa0 100644
--- a/src/app/components/RenderMessageContent.tsx
+++ b/src/app/components/RenderMessageContent.tsx
@@ -237,7 +237,7 @@ export function RenderMessageContent({
title={body}
src={src}
loading="lazy"
- style={{ objectFit: 'cover', width: '100%', height: '100%' }}
+ style={{ objectFit: 'cover', objectPosition: 'center top', width: '100%', height: '100%' }}
/>
)}
/>
diff --git a/src/app/components/media/media.css.ts b/src/app/components/media/media.css.ts
index b563ef3ed..8208ce287 100644
--- a/src/app/components/media/media.css.ts
+++ b/src/app/components/media/media.css.ts
@@ -5,6 +5,7 @@ export const Image = style([
DefaultReset,
{
objectFit: 'cover',
+ objectPosition: 'center top',
width: '100%',
height: '100%',
},
diff --git a/src/app/features/room/MediaGallery.tsx b/src/app/features/room/MediaGallery.tsx
index ac4e96478..6bb489c36 100644
--- a/src/app/features/room/MediaGallery.tsx
+++ b/src/app/features/room/MediaGallery.tsx
@@ -422,7 +422,7 @@ function GalleryTile({
)}