feat: render desktop latest section as 3-column masonry
- Matches Figma design (file uHDZkVHjAp7BXDKQKB0PM4, node 4367-11405). - Mobile keeps the existing 5-post single column unchanged. - Desktop (md+) renders all 12 latest posts in a CSS-columns masonry with break-inside-avoid so each card's height stays content-driven. - Adds an optional 'fluid' prop to MessageBubble that drops the standalone-feed max-widths so bubbles fill the masonry column. The /browse stream keeps the default non-fluid widths.
This commit is contained in:
@@ -464,13 +464,25 @@ export function Home() {
|
||||
viewAllLabel={t("viewAll")}
|
||||
/>
|
||||
</div>
|
||||
<div className="mt-2.5 flex flex-col gap-3 md:mt-7">
|
||||
<div className="mt-2.5 flex flex-col gap-3 md:hidden">
|
||||
{latestPosts.slice(0, 5).map((post, index) => (
|
||||
<Reveal key={post.id} delay={Math.min(index, 8) * 0.05}>
|
||||
<MessageBubble post={post} />
|
||||
</Reveal>
|
||||
))}
|
||||
</div>
|
||||
{/* Desktop: 3-column masonry that matches the Figma layout. */}
|
||||
<div className="mt-7 hidden gap-4 md:block md:columns-3">
|
||||
{latestPosts.map((post, index) => (
|
||||
<Reveal
|
||||
key={post.id}
|
||||
delay={Math.min(index, 8) * 0.05}
|
||||
className="mb-4 break-inside-avoid"
|
||||
>
|
||||
<MessageBubble post={post} fluid />
|
||||
</Reveal>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</Reveal>
|
||||
|
||||
Reference in New Issue
Block a user