fix: timestamp info styling

unkeyed · Dec 19, 2024 · b561a82 · b561a82
1 parent d7ef66d
commit b561a82
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 33 deletions.
diff --git a/apps/dashboard/app/(app)/logs/components/filters/components/time-split.tsx b/apps/dashboard/app/(app)/logs/components/filters/components/time-split.tsx
@@ -2,7 +2,7 @@
 import { format } from "date-fns";
 import { Clock } from "lucide-react";
 import type React from "react";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 
 export type Time = {
   HH: string;
@@ -192,11 +192,6 @@ const TimeSplitInput = ({
     setFocus(true);
   };
 
-  // biome-ignore lint/correctness/useExhaustiveDependencies: no need to call every
-  useEffect(() => {
-    handleOnBlur();
-  }, [startDate, endDate]);
-
   return (
     <div
       className={`

diff --git a/apps/dashboard/components/timestamp-info.tsx b/apps/dashboard/components/timestamp-info.tsx
@@ -3,7 +3,8 @@
 
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
-import { format, formatRelative, fromUnixTime } from "date-fns";
+import { format, fromUnixTime } from "date-fns";
+import ms from "ms";
 import { useEffect, useRef, useState } from "react";
 
 const unixMicroToDate = (unix: string | number): Date => {
@@ -30,7 +31,8 @@ const timestampUtcFormatter = (value: string | number) => {
 
 const timestampRelativeFormatter = (value: string | number) => {
   const date = isUnixMicro(value) ? unixMicroToDate(value) : new Date(value);
-  return formatRelative(date, new Date());
+  const diffMs = Date.now() - date.getTime();
+  return `${ms(diffMs)} ago`;
 };
 
 export const TimestampInfo = ({
@@ -66,8 +68,9 @@ export const TimestampInfo = ({
 
   const TooltipRow = ({ label, value }: { label: string; value: string }) => {
     const [copied, setCopied] = useState(false);
+
     return (
-      // biome-ignore lint/a11y/useKeyWithClickEvents: <explanation>
+      //biome-ignore lint/a11y/useKeyWithClickEvents: no need
       <span
         onClick={(e) => {
           e.stopPropagation();
@@ -77,15 +80,14 @@ export const TimestampInfo = ({
             setCopied(false);
           }, 1000);
         }}
-        className={cn(
-          "flex items-center space-x-2 hover:bg-background-subtle text-left px-3 py-2",
-          {
-            "bg-background-subtle": copied,
-          },
-        )}
+        className={cn("flex items-center hover:bg-background-subtle text-left px-3 py-2", {
+          "bg-background-subtle": copied,
+        })}
       >
-        <span className="text-right truncate">{label}:</span>
-        <span className={copied ? "text-success" : "capitalize"}>{copied ? "Copied!" : value}</span>
+        <span className="w-32 text-left truncate">{label}:</span>
+        <span className={cn("ml-2", copied ? "text-success" : "capitalize")}>
+          {copied ? "Copied!" : value}
+        </span>
       </span>
     );
   };

diff --git a/apps/dashboard/components/virtual-table.tsx b/apps/dashboard/components/virtual-table.tsx
@@ -170,24 +170,33 @@ export function VirtualTable<T>({
     </div>
   );
 
+  const TableHeader = () => (
+    <>
+      <div
+        className="grid text-sm font-medium text-accent-12"
+        style={{
+          gridTemplateColumns: columns.map((col) => col.width).join(" "),
+        }}
+      >
+        {columns.map((column) => (
+          <div key={column.key} className="p-2 min-w-0">
+            <div className="truncate">{column.header}</div>
+          </div>
+        ))}
+      </div>
+      <div className="w-full border-t border-border" />
+    </>
+  );
+
   if (!isLoading && data.length === 0) {
     return (
-      <div className="w-full h-full flex flex-col" ref={containerRef}>
-        <div
-          className="grid text-sm font-medium text-accent-12"
-          style={{
-            gridTemplateColumns: columns.map((col) => col.width).join(" "),
-          }}
-        >
-          {columns.map((column) => (
-            <div key={column.key} className="p-2 min-w-0">
-              <div className="truncate">{column.header}</div>
-            </div>
-          ))}
-        </div>
-        <div className="w-full border-t border-border" />
-
-        <div className="flex-1 flex justify-center items-center min-h-0">
+      <div
+        className="w-full h-full flex flex-col"
+        ref={containerRef}
+        style={{ height: `${fixedHeight}px` }}
+      >
+        <TableHeader />
+        <div className="flex-1 flex items-center justify-center">
           {emptyState || (
             <Card className="w-[400px] bg-background-subtle">
               <CardContent className="flex justify-center gap-2 items-center p-6">
@@ -203,6 +212,7 @@ export function VirtualTable<T>({
 
   return (
     <div className="w-full flex flex-col" ref={containerRef}>
+      <TableHeader />
       <div
         className="grid text-sm font-medium text-accent-12"
         style={{