diff --git a/src/components/feed/PostDetailDialog.tsx b/src/components/feed/PostDetailDialog.tsx
index e691bf7..47f4164 100644
--- a/src/components/feed/PostDetailDialog.tsx
+++ b/src/components/feed/PostDetailDialog.tsx
@@ -264,7 +264,17 @@ export function PostDetailDialog({ post, open, onClose, onDeleted }: PostDetailD
     isCarousel ? (
       <div className="relative w-full h-full">
         <AiDisclosureBadge value={post.aiDisclosure} className="h-8" />
-        <Carousel setApi={setCarouselApi} className="h-full">
+        {/* grid items-center (not flex) on purpose: CarouselContent's own
+            ref div (src/components/ui/carousel.tsx) is hardcoded to
+            "overflow-hidden" with no height/flex class reaching it, so it
+            never fills this element's height — shorter images in a
+            mixed-aspect-ratio carousel rendered pinned to the top instead
+            of centered. This is the deepest point we can attach centering
+            to from outside. Grid over flex specifically because grid's
+            default justify-items:stretch keeps the ref div's width at
+            100% (required for embla's horizontal scroll math); flex's
+            shrink-to-content main-axis default would have broken that. */}
+        <Carousel setApi={setCarouselApi} className="grid h-full items-center">
           <CarouselContent className="h-full">
             {images.map((img) => (
               <CarouselItem key={img.id} className="basis-full h-full flex items-center justify-center">
@@ -272,8 +282,8 @@ export function PostDetailDialog({ post, open, onClose, onDeleted }: PostDetailD
                   src={getMediaUrl(img.storageKey) ?? ""}
                   blurhash={img.blurhash}
                   alt={currentCaption ?? `${pet.name}'s post`}
-                  className="block w-full h-full object-contain"
-                  wrapperClassName="relative block w-full h-full"
+                  className="block max-h-full max-w-full object-contain"
+                  wrapperClassName="relative block w-fit h-fit"
                 />
               </CarouselItem>
             ))}