fix: Fix the look of the grid view and allowing notes to have variable size

5 files changed, 5 insertions, 10 deletions

diff --git a/packages/web/app/dashboard/bookmarks/components/BookmarkedTextEditor.tsx b/packages/web/app/dashboard/bookmarks/components/BookmarkedTextEditor.tsx
index a6df8737..c449fae3 100644
--- a/packages/web/app/dashboard/bookmarks/components/BookmarkedTextEditor.tsx
+++ b/packages/web/app/dashboard/bookmarks/components/BookmarkedTextEditor.tsx
@@ -58,7 +58,6 @@ export function BookmarkedTextEditor({
           description: "Note updated!",
         });
         setOpen(false);
-        setNoteText("");
       },
       onError: () => {
         toast({ description: "Something went wrong", variant: "destructive" });
diff --git a/packages/web/app/dashboard/bookmarks/components/BookmarkedTextViewer.tsx b/packages/web/app/dashboard/bookmarks/components/BookmarkedTextViewer.tsx
index aba9f8a6..3f4a647d 100644
--- a/packages/web/app/dashboard/bookmarks/components/BookmarkedTextViewer.tsx
+++ b/packages/web/app/dashboard/bookmarks/components/BookmarkedTextViewer.tsx
@@ -1,4 +1,3 @@
-import { ZBookmark } from "@/lib/types/api/bookmarks";
 import { Dialog, DialogContent } from "@/components/ui/dialog";
 import Markdown from "react-markdown";
 
diff --git a/packages/web/app/dashboard/bookmarks/components/BookmarksGrid.tsx b/packages/web/app/dashboard/bookmarks/components/BookmarksGrid.tsx
index c960c8b7..aeed4680 100644
--- a/packages/web/app/dashboard/bookmarks/components/BookmarksGrid.tsx
+++ b/packages/web/app/dashboard/bookmarks/components/BookmarksGrid.tsx
@@ -32,11 +32,11 @@ export default function BookmarksGrid({
     return <p>No bookmarks</p>;
   }
   return (
-    <div className="container grid grid-flow-row-dense grid-cols-1 gap-4 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
+    <div className="transition-all duration-300 columns-1 gap-4 md:columns-2 lg:columns-3">
       {data.bookmarks.map((b) =>
         renderBookmark(
           b,
-          "border-grey-100 border bg-gray-50 duration-300 ease-in hover:border-blue-300 hover:transition-all",
+          "border-grey-100 border bg-gray-50 duration-300 ease-in hover:border-blue-300 hover:transition-all mb-4",
         ),
       )}
     </div>
diff --git a/packages/web/app/dashboard/bookmarks/components/TextCard.tsx b/packages/web/app/dashboard/bookmarks/components/TextCard.tsx
index 1d3fad3a..29d22352 100644
--- a/packages/web/app/dashboard/bookmarks/components/TextCard.tsx
+++ b/packages/web/app/dashboard/bookmarks/components/TextCard.tsx
@@ -32,8 +32,6 @@ export default function TextCard({
     throw new Error("Unexpected bookmark type");
   }
 
-  const numWords = bookmarkedText.text.split(" ").length;
-
   return (
     <>
       <BookmarkedTextViewer
@@ -45,15 +43,14 @@ export default function TextCard({
         className={cn(
           className,
           cn(
-            "flex flex-col gap-y-1 overflow-hidden rounded-lg p-2 shadow-md",
-            numWords > 12 ? "row-span-2 h-96" : "row-span-1 h-40",
+            "flex h-min max-h-96 flex-col gap-y-1 overflow-hidden rounded-lg p-2 shadow-md",
           ),
         )}
       >
         <Markdown className="prose grow overflow-hidden">
           {bookmarkedText.text}
         </Markdown>
-        <div className="flex flex-none flex-wrap gap-1 overflow-hidden">
+        <div className="mt-4 flex flex-none flex-wrap gap-1 overflow-hidden">
           <TagList bookmark={bookmark} />
         </div>
         <div className="flex w-full justify-between">
diff --git a/packages/web/app/dashboard/bookmarks/layout.tsx b/packages/web/app/dashboard/bookmarks/layout.tsx
index 98aa75a4..b03a9a19 100644
--- a/packages/web/app/dashboard/bookmarks/layout.tsx
+++ b/packages/web/app/dashboard/bookmarks/layout.tsx
@@ -17,7 +17,7 @@ export default function BookmarksLayout({
         <AddBookmark />
       </div>
       <hr />
-      <div className="my-4 flex-1">{children}</div>
+      <div className="my-4 flex-1 pb-4">{children}</div>
     </div>
   );
 }