1 files changed, 21 insertions, 13 deletions
diff --git a/apps/web/components/public/lists/PublicBookmarkGrid.tsx b/apps/web/components/public/lists/PublicBookmarkGrid.tsx
index d6aa9875..742d7e6e 100644
--- a/apps/web/components/public/lists/PublicBookmarkGrid.tsx
+++ b/apps/web/components/public/lists/PublicBookmarkGrid.tsx
@@ -9,14 +9,15 @@ import { ActionButton } from "@/components/ui/action-button";
 import { badgeVariants } from "@/components/ui/badge";
 import { Card, CardContent } from "@/components/ui/card";
 import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
-import { api } from "@/lib/trpc";
 import { cn } from "@/lib/utils";
 import tailwindConfig from "@/tailwind.config";
+import { useInfiniteQuery } from "@tanstack/react-query";
 import { Expand, FileIcon, ImageIcon } from "lucide-react";
 import { useInView } from "react-intersection-observer";
 import Masonry from "react-masonry-css";
 import resolveConfig from "tailwindcss/resolveConfig";
 
+import { useTRPC } from "@karakeep/shared-react/trpc";
 import {
   BookmarkTypes,
   ZPublicBookmark,
@@ -199,19 +200,22 @@ export default function PublicBookmarkGrid({
   bookmarks: ZPublicBookmark[];
   nextCursor: ZCursor | null;
 }) {
+  const api = useTRPC();
   const { ref: loadMoreRef, inView: loadMoreButtonInView } = useInView();
   const { data, fetchNextPage, hasNextPage, isFetchingNextPage } =
-    api.publicBookmarks.getPublicBookmarksInList.useInfiniteQuery(
-      { listId: list.id },
-      {
-        initialData: () => ({
-          pages: [{ bookmarks: initialBookmarks, nextCursor, list }],
-          pageParams: [null],
-        }),
-        initialCursor: null,
-        getNextPageParam: (lastPage) => lastPage.nextCursor,
-        refetchOnMount: true,
-      },
+    useInfiniteQuery(
+      api.publicBookmarks.getPublicBookmarksInList.infiniteQueryOptions(
+        { listId: list.id },
+        {
+          initialData: () => ({
+            pages: [{ bookmarks: initialBookmarks, nextCursor, list }],
+            pageParams: [null],
+          }),
+          initialCursor: null,
+          getNextPageParam: (lastPage) => lastPage.nextCursor,
+          refetchOnMount: true,
+        },
+      ),
     );
 
   useEffect(() => {
@@ -227,7 +231,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} />
         ))}