fix(web): Fix some JS console errors in the preview page

3 files changed, 19 insertions, 10 deletions

diff --git a/apps/web/components/dashboard/bookmarks/TagsEditor.tsx b/apps/web/components/dashboard/bookmarks/TagsEditor.tsx
index c1a4cc70..ab7dd754 100644
--- a/apps/web/components/dashboard/bookmarks/TagsEditor.tsx
+++ b/apps/web/components/dashboard/bookmarks/TagsEditor.tsx
@@ -111,7 +111,7 @@ export function TagsEditor({ bookmark }: { bookmark: ZBookmark }) {
       })}
       styles={{
         multiValueRemove: () => ({
-          "background-color": "transparent",
+          backgroundColor: "transparent",
         }),
         valueContainer: (styles) => ({
           ...styles,
@@ -122,10 +122,10 @@ export function TagsEditor({ bookmark }: { bookmark: ZBookmark }) {
         }),
         control: (styles) => ({
           ...styles,
-          "background-color": "hsl(var(--background))",
-          "border-color": "hsl(var(--border))",
+          backgroundColor: "hsl(var(--background))",
+          borderColor: "hsl(var(--border))",
           ":hover": {
-            "border-color": "hsl(var(--border))",
+            borderColor: "hsl(var(--border))",
           },
         }),
       }}
diff --git a/apps/web/components/dashboard/preview/ActionBar.tsx b/apps/web/components/dashboard/preview/ActionBar.tsx
index 45d67b34..d2048cad 100644
--- a/apps/web/components/dashboard/preview/ActionBar.tsx
+++ b/apps/web/components/dashboard/preview/ActionBar.tsx
@@ -53,7 +53,7 @@ export default function ActionBar({ bookmark }: { bookmark: ZBookmark }) {
   return (
     <div className="flex items-center justify-center gap-3">
       <Tooltip delayDuration={0}>
-        <TooltipTrigger>
+        <TooltipTrigger asChild>
           <ActionButton
             variant="none"
             className="size-14 rounded-full bg-background"
@@ -73,7 +73,7 @@ export default function ActionBar({ bookmark }: { bookmark: ZBookmark }) {
         </TooltipContent>
       </Tooltip>
       <Tooltip delayDuration={0}>
-        <TooltipTrigger>
+        <TooltipTrigger asChild>
           <ActionButton
             variant="none"
             loading={pendingArchive}
@@ -93,7 +93,7 @@ export default function ActionBar({ bookmark }: { bookmark: ZBookmark }) {
         </TooltipContent>
       </Tooltip>
       <Tooltip delayDuration={0}>
-        <TooltipTrigger>
+        <TooltipTrigger asChild>
           <ActionButton
             loading={pendingDeletion}
             className="size-14 rounded-full bg-background"
diff --git a/apps/web/components/dashboard/preview/BookmarkPreview.tsx b/apps/web/components/dashboard/preview/BookmarkPreview.tsx
index 4cd9199d..73e49376 100644
--- a/apps/web/components/dashboard/preview/BookmarkPreview.tsx
+++ b/apps/web/components/dashboard/preview/BookmarkPreview.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { useEffect, useState } from "react";
 import Link from "next/link";
 import { TagsEditor } from "@/components/dashboard/bookmarks/TagsEditor";
 import { Separator } from "@/components/ui/separator";
@@ -39,15 +40,23 @@ function ContentLoading() {
 }
 
 function CreationTime({ createdAt }: { createdAt: Date }) {
+  const [fromNow, setFromNow] = useState("");
+  const [localCreatedAt, setLocalCreatedAt] = useState("");
+
+  // This is to avoid hydration errors when server and clients are in different timezones
+  useEffect(() => {
+    setFromNow(dayjs(createdAt).fromNow());
+    setLocalCreatedAt(createdAt.toLocaleString());
+  }, [createdAt]);
   return (
     <Tooltip delayDuration={0}>
       <TooltipTrigger asChild>
         <span className="flex w-fit gap-2">
-          <CalendarDays /> {dayjs(createdAt).fromNow()}
+          <CalendarDays /> {fromNow}
         </span>
       </TooltipTrigger>
       <TooltipPortal>
-        <TooltipContent>{createdAt.toLocaleString()}</TooltipContent>
+        <TooltipContent>{localCreatedAt}</TooltipContent>
       </TooltipPortal>
     </Tooltip>
   );
@@ -127,7 +136,7 @@ export default function BookmarkPreview({
   );
 
   return (
-    <div className="grid grid-rows-3 gap-2 overflow-hidden bg-background lg:grid-cols-3 lg:grid-rows-none">
+    <div className="grid h-full grid-rows-3 gap-2 overflow-hidden bg-background lg:grid-cols-3 lg:grid-rows-none">
       <div className="row-span-2 h-full w-full overflow-auto p-2 md:col-span-2 lg:row-auto">
         {isBookmarkStillCrawling(bookmark) ? <ContentLoading /> : content}
       </div>