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

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>

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` `<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`.
 
 ---
 

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%' }}
                           />
                         )}
                       />

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%',
   },

src/app/features/room/MediaGallery.tsx

@@ -422,7 +422,7 @@ function GalleryTile({
         <img
           src={media.url}
           alt={body}
-          style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
+          style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center top', display: 'block' }}
         />
       )}