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:
@@ -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 ${
|
||||
|
||||
Reference in New Issue
Block a user