From 98037d434ecc015269be8d71ed223fcc85cd04a5 Mon Sep 17 00:00:00 2001
From: neodk2004 <barac.daniel@gmail.com>
Date: Fri, 14 Aug 2026 15:02:17 +0200
Subject: [PATCH] fix(media): center portrait images in post detail and story
 viewer
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The image wrapper used w-auto inside a flex container, which is
ambiguous for flex items — it could stretch to fill the available
width instead of shrinking to the image's actual rendered size. Not
visible for landscape images (little leftover space either way), but
portrait images left a wide gap and sat flush left instead of centered.
Switch to w-fit/h-fit (fit-content), which is unambiguous regardless of
flex context. Same wrapperClassName pattern in both files, so applied
to both.
---
 src/components/feed/PostDetailDialog.tsx | 6 +++---
 src/components/stories/StoryViewer.tsx   | 4 ++--
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/feed/PostDetailDialog.tsx b/src/components/feed/PostDetailDialog.tsx
index 3a0b775..cf6e612 100644
--- a/src/components/feed/PostDetailDialog.tsx
+++ b/src/components/feed/PostDetailDialog.tsx
@@ -265,7 +265,7 @@ export function PostDetailDialog({ post, open, onClose, onDeleted }: PostDetailD
                   blurhash={img.blurhash}
                   alt={currentCaption ?? `${pet.name}'s post`}
                   className="block max-h-full max-w-full object-contain"
-                  wrapperClassName="relative block h-auto w-auto"
+                  wrapperClassName="relative block h-fit w-fit"
                 />
               </CarouselItem>
             ))}
@@ -288,13 +288,13 @@ export function PostDetailDialog({ post, open, onClose, onDeleted }: PostDetailD
         </div>
       </div>
     ) : (
-      <div className="relative inline-flex max-h-full max-w-full">
+      <div className="relative inline-flex w-fit max-h-full max-w-full">
         <BlurImage
           src={getMediaUrl(images[0].storageKey) ?? ""}
           blurhash={images[0].blurhash}
           alt={currentCaption ?? `${pet.name}'s post`}
           className="block max-h-full max-w-full object-contain"
-          wrapperClassName="relative block h-auto w-auto"
+          wrapperClassName="relative block h-fit w-fit"
         />
         <AiDisclosureBadge value={post.aiDisclosure} className="h-8" />
       </div>
diff --git a/src/components/stories/StoryViewer.tsx b/src/components/stories/StoryViewer.tsx
index 89dc27d..f60740d 100644
--- a/src/components/stories/StoryViewer.tsx
+++ b/src/components/stories/StoryViewer.tsx
@@ -162,13 +162,13 @@ export function StoryViewer({
               usages like feed thumbnails), so it's overridden here via
               wrapperClassName. */}
           {mediaUrl && (
-            <div className="relative inline-flex max-h-screen max-w-full">
+            <div className="relative inline-flex w-fit max-h-screen max-w-full">
               <BlurImage
                 src={mediaUrl}
                 blurhash={currentStory.blurhash}
                 alt={t("storyAriaLabel", { petName })}
                 className="block max-h-screen max-w-full object-contain"
-                wrapperClassName="relative block h-auto w-auto"
+                wrapperClassName="relative block h-fit w-fit"
               />
               <AiDisclosureBadge
                 value={currentStory.aiDisclosure}