From 9efc2077109258bd9aba75484f6cd80ef6e8f1ff Mon Sep 17 00:00:00 2001 From: neodk2004 Date: Fri, 14 Aug 2026 15:07:40 +0200 Subject: [PATCH] fix(media): restore height for portrait images, keep width centering fix MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit h-fit (from the previous fix) disabled the flex cross-axis stretch that h-auto triggers. That stretch is what gave the image wrapper a definite height in the first place — without it, the image's max-h-full (a percentage) had no definite reference to resolve against, so browsers ignored it and the image rendered at its full natural height, getting clipped at the bottom of the dialog. Width and height turned out to need opposite fixes: w-fit for width (explicit shrink-to-fit avoids the flex-item main-axis stretch that caused the left-alignment bug), h-auto for height (keeps the cross-axis stretch that max-h-full depends on). --- src/components/feed/PostDetailDialog.tsx | 4 ++-- src/components/stories/StoryViewer.tsx | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/feed/PostDetailDialog.tsx b/src/components/feed/PostDetailDialog.tsx index cf6e612..9b108c2 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-fit w-fit" + wrapperClassName="relative block h-auto w-fit" /> ))} @@ -294,7 +294,7 @@ export function PostDetailDialog({ post, open, onClose, onDeleted }: PostDetailD blurhash={images[0].blurhash} alt={currentCaption ?? `${pet.name}'s post`} className="block max-h-full max-w-full object-contain" - wrapperClassName="relative block h-fit w-fit" + wrapperClassName="relative block h-auto w-fit" /> diff --git a/src/components/stories/StoryViewer.tsx b/src/components/stories/StoryViewer.tsx index f60740d..7909ed9 100644 --- a/src/components/stories/StoryViewer.tsx +++ b/src/components/stories/StoryViewer.tsx @@ -168,7 +168,7 @@ export function StoryViewer({ blurhash={currentStory.blurhash} alt={t("storyAriaLabel", { petName })} className="block max-h-screen max-w-full object-contain" - wrapperClassName="relative block h-fit w-fit" + wrapperClassName="relative block h-auto w-fit" />