terry-staging #11

Merged
terry merged 37 commits from terry-staging into main 2026-05-29 19:29:58 +00:00
Showing only changes of commit b848ce5db3 - Show all commits

View File

@@ -26,6 +26,12 @@ export function AlbumBubble({ post }: { post: Post }) {
const ratios = useImageRatios(visible, sources); const ratios = useImageRatios(visible, sources);
const layout = computeAlbumLayout(ratios); 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 ( return (
<div className="flex flex-col"> <div className="flex flex-col">
{/* aspect-ratio sets a definite box height; tiles are absolutely {/* aspect-ratio sets a definite box height; tiles are absolutely
@@ -67,7 +73,7 @@ export function AlbumBubble({ post }: { post: Post }) {
src={sources[i]} src={sources[i]}
fallbackSrc={[att.thumbUrl, att.url]} fallbackSrc={[att.thumbUrl, att.url]}
loading="lazy" 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 ? ( {isLastSlot ? (
<div className="absolute inset-0 flex flex-col items-center justify-center gap-0.5 bg-black/60 text-white backdrop-blur-[1px] transition group-hover:bg-black/50"> <div className="absolute inset-0 flex flex-col items-center justify-center gap-0.5 bg-black/60 text-white backdrop-blur-[1px] transition group-hover:bg-black/50">