diff --git a/src/components/messageStream/bubbles/AlbumBubble.tsx b/src/components/messageStream/bubbles/AlbumBubble.tsx index 6720d05..d50074e 100644 --- a/src/components/messageStream/bubbles/AlbumBubble.tsx +++ b/src/components/messageStream/bubbles/AlbumBubble.tsx @@ -26,6 +26,12 @@ export function AlbumBubble({ post }: { post: Post }) { const ratios = useImageRatios(visible, sources); const layout = computeAlbumLayout(ratios); + // Two-image albums scale each image to fit its cell (object-contain) so a + // tall poster is never cropped — the cell already matches the image ratio, so + // there are no bars except on very wide screens where the height is capped. + // 3+ images keep object-cover to stay a tidy mosaic. + const imgFit = visible.length === 2 ? "object-contain" : "object-cover"; + return (
{/* aspect-ratio sets a definite box height; tiles are absolutely @@ -67,7 +73,7 @@ export function AlbumBubble({ post }: { post: Post }) { src={sources[i]} fallbackSrc={[att.thumbUrl, att.url]} loading="lazy" - className="h-full w-full object-cover transition duration-300 group-hover:scale-[1.03]" + className={`h-full w-full ${imgFit} transition duration-300 group-hover:scale-[1.03]`} /> {isLastSlot ? (