From 789188b522c0570b092f588209c4f0d270b703e3 Mon Sep 17 00:00:00 2001
From: Evan Frenkel <3375094+evan6seven@users.noreply.github.com>
Date: Sun, 18 Jan 2026 05:14:22 -0800
Subject: fix(web): avoid masonry overflow in bookmark grids (#2400)

---
 apps/web/components/dashboard/bookmarks/BookmarksGrid.tsx    | 12 ++++++++++--
 .../components/dashboard/bookmarks/BookmarksGridSkeleton.tsx | 12 ++++++++++--
 apps/web/components/public/lists/PublicBookmarkGrid.tsx      |  6 +++++-
 3 files changed, 25 insertions(+), 5 deletions(-)

(limited to 'apps/web/components')

diff --git a/apps/web/components/dashboard/bookmarks/BookmarksGrid.tsx b/apps/web/components/dashboard/bookmarks/BookmarksGrid.tsx
index ab7bafb3..b3a1881a 100644
--- a/apps/web/components/dashboard/bookmarks/BookmarksGrid.tsx
+++ b/apps/web/components/dashboard/bookmarks/BookmarksGrid.tsx
@@ -117,12 +117,20 @@ export default function BookmarksGrid({
     <>
       {bookmarkLayoutSwitch(layout, {
         masonry: (
-          <Masonry className="flex gap-4" breakpointCols={breakpointConfig}>
+          <Masonry
+            className="-ml-4 flex w-auto"
+            columnClassName="pl-4"
+            breakpointCols={breakpointConfig}
+          >
             {children}
           </Masonry>
         ),
         grid: (
-          <Masonry className="flex gap-4" breakpointCols={breakpointConfig}>
+          <Masonry
+            className="-ml-4 flex w-auto"
+            columnClassName="pl-4"
+            breakpointCols={breakpointConfig}
+          >
             {children}
           </Masonry>
         ),
diff --git a/apps/web/components/dashboard/bookmarks/BookmarksGridSkeleton.tsx b/apps/web/components/dashboard/bookmarks/BookmarksGridSkeleton.tsx
index b592919b..9adc7b7a 100644
--- a/apps/web/components/dashboard/bookmarks/BookmarksGridSkeleton.tsx
+++ b/apps/web/components/dashboard/bookmarks/BookmarksGridSkeleton.tsx
@@ -69,12 +69,20 @@ export default function BookmarksGridSkeleton({
 
   return bookmarkLayoutSwitch(layout, {
     masonry: (
-      <Masonry className="flex gap-4" breakpointCols={breakpointConfig}>
+      <Masonry
+        className="-ml-4 flex w-auto"
+        columnClassName="pl-4"
+        breakpointCols={breakpointConfig}
+      >
         {children}
       </Masonry>
     ),
     grid: (
-      <Masonry className="flex gap-4" breakpointCols={breakpointConfig}>
+      <Masonry
+        className="-ml-4 flex w-auto"
+        columnClassName="pl-4"
+        breakpointCols={breakpointConfig}
+      >
         {children}
       </Masonry>
     ),
diff --git a/apps/web/components/public/lists/PublicBookmarkGrid.tsx b/apps/web/components/public/lists/PublicBookmarkGrid.tsx
index d6aa9875..18e42baa 100644
--- a/apps/web/components/public/lists/PublicBookmarkGrid.tsx
+++ b/apps/web/components/public/lists/PublicBookmarkGrid.tsx
@@ -227,7 +227,11 @@ export default function PublicBookmarkGrid({
   }, [data]);
   return (
     <>
-      <Masonry className="flex gap-4" breakpointCols={breakpointConfig}>
+      <Masonry
+        className="-ml-4 flex w-auto"
+        columnClassName="pl-4"
+        breakpointCols={breakpointConfig}
+      >
         {bookmarks.map((bookmark) => (
           <BookmarkCard key={bookmark.id} bookmark={bookmark} />
         ))}
-- 
cgit v1.2.3-70-g09d2