feat(dashboard): fix on hover regression

novuhq · Jan 28, 2025 · f53a108 · f53a108
1 parent c778234
commit f53a108
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 26 deletions.
diff --git a/apps/dashboard/src/components/workflow-list.tsx b/apps/dashboard/src/components/workflow-list.tsx
@@ -30,6 +30,40 @@ interface WorkflowListProps {
   onClearFilters?: () => void;
 }
 
+interface WorkflowListSkeletonProps {
+  limit: number;
+}
+
+function WorkflowListSkeleton({ limit }: WorkflowListSkeletonProps) {
+  return (
+    <>
+      {new Array(limit).fill(0).map((_, index) => (
+        <TableRow key={index}>
+          <TableCell className="flex flex-col gap-1 font-medium">
+            <Skeleton className="h-5 w-[20ch]" />
+            <Skeleton className="h-3 w-[15ch] rounded-full" />
+          </TableCell>
+          <TableCell>
+            <Skeleton className="h-5 w-[6ch] rounded-full" />
+          </TableCell>
+          <TableCell>
+            <Skeleton className="h-5 w-[8ch] rounded-full" />
+          </TableCell>
+          <TableCell>
+            <Skeleton className="h-5 w-[7ch] rounded-full" />
+          </TableCell>
+          <TableCell className="text-foreground-600 text-sm font-medium">
+            <Skeleton className="h-5 w-[14ch] rounded-full" />
+          </TableCell>
+          <TableCell className="text-foreground-600 text-sm font-medium">
+            <RiMore2Fill className="size-4 opacity-50" />
+          </TableCell>
+        </TableRow>
+      ))}
+    </>
+  );
+}
+
 export function WorkflowList({
   data,
   isLoading,
@@ -100,31 +134,7 @@ export function WorkflowList({
         </TableHeader>
         <TableBody>
           {isLoading ? (
-            <>
-              {new Array(limit).fill(0).map((_, index) => (
-                <TableRow key={index}>
-                  <TableCell className="flex flex-col gap-1 font-medium">
-                    <Skeleton className="h-5 w-[20ch]" />
-                    <Skeleton className="h-3 w-[15ch] rounded-full" />
-                  </TableCell>
-                  <TableCell>
-                    <Skeleton className="h-5 w-[6ch] rounded-full" />
-                  </TableCell>
-                  <TableCell>
-                    <Skeleton className="h-5 w-[8ch] rounded-full" />
-                  </TableCell>
-                  <TableCell>
-                    <Skeleton className="h-5 w-[7ch] rounded-full" />
-                  </TableCell>
-                  <TableCell className="text-foreground-600 text-sm font-medium">
-                    <Skeleton className="h-5 w-[14ch] rounded-full" />
-                  </TableCell>
-                  <TableCell className="text-foreground-600 text-sm font-medium">
-                    <RiMore2Fill className="size-4 opacity-50" />
-                  </TableCell>
-                </TableRow>
-              ))}
-            </>
+            <WorkflowListSkeleton limit={limit} />
           ) : (
             <>{data?.workflows.map((workflow) => <WorkflowRow key={workflow._id} workflow={workflow} />)}</>
           )}

diff --git a/apps/dashboard/src/components/workflow-row.tsx b/apps/dashboard/src/components/workflow-row.tsx
@@ -219,7 +219,7 @@ export const WorkflowRow = ({ workflow }: WorkflowRowProps) => {
       </WorkflowLinkTableCell>
 
       <WorkflowLinkTableCell workflow={workflow} className="text-foreground-600 min-w-[180px] text-sm font-medium">
-        <TimeDisplayHoverCard date={new Date(workflow.updatedAt)}>
+        <TimeDisplayHoverCard date={new Date(workflow.updatedAt)} className="relative z-10">
           {formatDateSimple(workflow.updatedAt)}
         </TimeDisplayHoverCard>
       </WorkflowLinkTableCell>