fix(media): center portrait images in post detail and story viewer

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

@@ -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>

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}