(READ ONLY) Margin is an open annotation layer for the internet. Powered by the AT Protocol.
margin.at
extension
web
atproto
comments
fix bookmark cards in mosaic layout
+32
-8
+30
-6
web/src/components/common/Card.tsx
+30
-6
web/src/components/common/Card.tsx
···
101
101
onDelete?: (uri: string) => void;
102
102
onUpdate?: (item: AnnotationItem) => void;
103
103
hideShare?: boolean;
104
+
layout?: "list" | "mosaic";
104
105
}
105
106
106
107
export default function Card({
···
108
109
onDelete,
109
110
onUpdate,
110
111
hideShare,
112
+
layout = "list",
111
113
}: CardProps) {
112
114
const [item, setItem] = useState(initialItem);
113
115
const user = useStore($user);
···
421
423
</div>
422
424
</div>
423
425
424
-
<div className="mt-3 ml-[52px] relative">
426
+
<div
427
+
className={clsx(
428
+
"mt-3 relative",
429
+
layout === "mosaic" ? "" : "ml-[52px]",
430
+
)}
431
+
>
425
432
{contentWarning && !contentRevealed && (
426
433
<div className="absolute inset-0 z-10 rounded-lg bg-surface-100 dark:bg-surface-800 flex flex-col items-center justify-center gap-2 py-4">
427
434
<div className="flex items-center gap-2 text-surface-500 dark:text-surface-400">
···
456
463
}}
457
464
role="button"
458
465
tabIndex={0}
459
-
className="flex items-stretch bg-surface-50 dark:bg-surface-800 rounded-xl border border-surface-200 dark:border-surface-700 hover:border-primary-300 dark:hover:border-primary-600 hover:bg-surface-100 dark:hover:bg-surface-700 transition-all group overflow-hidden cursor-pointer"
466
+
className={clsx(
467
+
"flex bg-surface-50 dark:bg-surface-800 rounded-xl border border-surface-200 dark:border-surface-700 hover:border-primary-300 dark:hover:border-primary-600 hover:bg-surface-100 dark:hover:bg-surface-700 transition-all group overflow-hidden cursor-pointer",
468
+
layout === "mosaic"
469
+
? "flex-col items-stretch"
470
+
: "flex-row items-stretch",
471
+
)}
460
472
>
461
473
{displayImage && !imgError && (
462
-
<div className="w-[140px] sm:w-[180px] shrink-0 border-r border-surface-200 dark:border-surface-700 bg-surface-200 dark:bg-surface-700 relative">
474
+
<div
475
+
className={clsx(
476
+
"shrink-0 bg-surface-200 dark:bg-surface-700 relative",
477
+
layout === "mosaic"
478
+
? "w-full aspect-video border-b border-surface-200 dark:border-surface-700"
479
+
: "w-[140px] sm:w-[180px] border-r border-surface-200 dark:border-surface-700",
480
+
)}
481
+
>
463
482
<div className="absolute inset-0 flex items-center justify-center overflow-hidden">
464
483
<img
465
484
src={displayImage}
466
-
alt=""
485
+
alt={displayTitle || "Link preview"}
486
+
className="h-full w-full object-cover"
467
487
onError={() => setImgError(true)}
468
-
className="w-full h-full object-cover"
469
488
/>
470
489
</div>
471
490
</div>
472
491
)}
473
-
<div className="p-3 flex-1 min-w-0 flex flex-col justify-center font-sans">
492
+
<div
493
+
className={clsx(
494
+
"p-3 min-w-0 flex flex-col font-sans",
495
+
layout === "mosaic" ? "w-full" : "flex-1 justify-center",
496
+
)}
497
+
>
474
498
<h3 className="font-semibold text-surface-900 dark:text-white text-sm leading-snug group-hover:text-primary-600 dark:group-hover:text-primary-400 mb-1.5 transition-colors line-clamp-2">
475
499
{displayTitle}
476
500
</h3>
+1
-1
web/src/components/feed/MasonryFeed.tsx
+1
-1
web/src/components/feed/MasonryFeed.tsx
···
110
110
<div className="columns-1 sm:columns-2 md:columns-3 xl:columns-4 gap-4 animate-fade-in">
111
111
{items.map((item) => (
112
112
<div key={item.uri || item.cid} className="break-inside-avoid mb-4">
113
-
<Card item={item} onDelete={handleDelete} />
113
+
<Card item={item} onDelete={handleDelete} layout="mosaic" />
114
114
</div>
115
115
))}
116
116
</div>
+1
-1
web/src/views/core/Feed.tsx
+1
-1
web/src/views/core/Feed.tsx
···
144
144
<div className="columns-1 sm:columns-2 xl:columns-3 2xl:columns-4 gap-4 animate-fade-in">
145
145
{items.map((item) => (
146
146
<div key={item.uri || item.cid} className="break-inside-avoid mb-4">
147
-
<Card item={item} onDelete={handleDelete} />
147
+
<Card item={item} onDelete={handleDelete} layout="mosaic" />
148
148
</div>
149
149
))}
150
150
</div>