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:
TerryM
2026-05-31 18:35:57 +08:00
parent 34ef6cba15
commit 06fe117ebc
2 changed files with 27 additions and 3 deletions

View File

@@ -23,7 +23,15 @@ export function pickBubble(post: Post): BubbleComponent {
return FileDocBubble; return FileDocBubble;
} }
export function MessageBubble({ post }: { post: Post }) { export function MessageBubble({
post,
fluid = false,
}: {
post: Post;
/** When true, fill the parent container instead of applying the standalone
* feed max-widths. Used by the desktop 3-column masonry on the home page. */
fluid?: boolean;
}) {
const Bubble = pickBubble(post); const Bubble = pickBubble(post);
const isVisual = const isVisual =
Bubble === AlbumBubble || Bubble === AlbumBubble ||
@@ -34,7 +42,11 @@ export function MessageBubble({ post }: { post: Post }) {
return ( return (
<div <div
id={`post-${post.id}`} id={`post-${post.id}`}
className="mx-auto w-full max-w-[358px] scroll-mt-[82px] md:max-w-[680px] md:scroll-mt-[98px] lg:max-w-[900px] xl:max-w-[1120px]" className={
fluid
? "w-full scroll-mt-[82px] md:scroll-mt-[98px]"
: "mx-auto w-full max-w-[358px] scroll-mt-[82px] md:max-w-[680px] md:scroll-mt-[98px] lg:max-w-[900px] xl:max-w-[1120px]"
}
> >
<article <article
className={`relative w-full overflow-hidden rounded-2xl bg-[#272632] text-left shadow-sm ${ className={`relative w-full overflow-hidden rounded-2xl bg-[#272632] text-left shadow-sm ${

View File

@@ -464,13 +464,25 @@ export function Home() {
viewAllLabel={t("viewAll")} viewAllLabel={t("viewAll")}
/> />
</div> </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) => ( {latestPosts.slice(0, 5).map((post, index) => (
<Reveal key={post.id} delay={Math.min(index, 8) * 0.05}> <Reveal key={post.id} delay={Math.min(index, 8) * 0.05}>
<MessageBubble post={post} /> <MessageBubble post={post} />
</Reveal> </Reveal>
))} ))}
</div> </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> </div>
</section> </section>
</Reveal> </Reveal>