From 06fe117ebc8f4121e5875191872c4f6ed50e38ef Mon Sep 17 00:00:00 2001
From: TerryM <chiachintat10@gmail.com>
Date: Sun, 31 May 2026 18:35:57 +0800
Subject: [PATCH] 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.
---
 src/components/messageStream/MessageBubble.tsx | 16 ++++++++++++++--
 src/pages/Home/index.tsx                       | 14 +++++++++++++-
 2 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/src/components/messageStream/MessageBubble.tsx b/src/components/messageStream/MessageBubble.tsx
index 5312977..d8fe2f9 100644
--- a/src/components/messageStream/MessageBubble.tsx
+++ b/src/components/messageStream/MessageBubble.tsx
@@ -23,7 +23,15 @@ export function pickBubble(post: Post): BubbleComponent {
   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 isVisual =
     Bubble === AlbumBubble ||
@@ -34,7 +42,11 @@ export function MessageBubble({ post }: { post: Post }) {
   return (
     <div
       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
         className={`relative w-full overflow-hidden rounded-2xl bg-[#272632] text-left shadow-sm ${
diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx
index efd42a3..31aa5e9 100644
--- a/src/pages/Home/index.tsx
+++ b/src/pages/Home/index.tsx
@@ -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>