diff --git a/src/components/feed/PostDetailDialog.tsx b/src/components/feed/PostDetailDialog.tsx
index 47f4164..1a6c4ea 100644
--- a/src/components/feed/PostDetailDialog.tsx
+++ b/src/components/feed/PostDetailDialog.tsx
@@ -264,18 +264,19 @@ export function PostDetailDialog({ post, open, onClose, onDeleted }: PostDetailD
     isCarousel ? (
       <div className="relative w-full h-full">
         <AiDisclosureBadge value={post.aiDisclosure} className="h-8" />
-        {/* 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">
+        {/* CarouselContent's own ref div (src/components/ui/carousel.tsx)
+            was hardcoded to "overflow-hidden" with no way to give it a
+            height — every className/grid/flex trick attached to its
+            ancestors or CarouselItem still had nothing but an indefinite
+            (percentage-against-auto-parent) height to work with at that
+            div specifically, so shorter images in a mixed-aspect-ratio
+            carousel rendered pinned to the top instead of centered no
+            matter what. Fixed at the source via CarouselContent's new
+            viewportClassName prop, which reaches that div directly —
+            h-full there now resolves against Carousel's own (genuinely
+            definite) height instead of falling back to auto. */}
+        <Carousel setApi={setCarouselApi} className="h-full">
+          <CarouselContent viewportClassName="h-full" className="h-full">
             {images.map((img) => (
               <CarouselItem key={img.id} className="basis-full h-full flex items-center justify-center">
                 <BlurImage
diff --git a/src/components/ui/carousel.tsx b/src/components/ui/carousel.tsx
index 9deee76..76ff982 100644
--- a/src/components/ui/carousel.tsx
+++ b/src/components/ui/carousel.tsx
@@ -132,13 +132,17 @@ function Carousel({
   )
 }
 
-function CarouselContent({ className, ...props }: React.ComponentProps<"div">) {
+function CarouselContent({
+  className,
+  viewportClassName,
+  ...props
+}: React.ComponentProps<"div"> & { viewportClassName?: string }) {
   const { carouselRef, orientation } = useCarousel()
 
   return (
     <div
       ref={carouselRef}
-      className="overflow-hidden"
+      className={cn("overflow-hidden", viewportClassName)}
       data-slot="carousel-content"
     >
       <div