(web) use table for sql logs

Author: joewagner

packages/web/components/sql-logs.tsx

@@ -7,6 +7,7 @@ import { Paginator } from "./paginator";
 import { Button } from "./ui/button";
 import { cn } from "@/lib/utils";
 import { type SqlLog, getSqlLogs } from "@/lib/validator-queries";
+import { Table, TableBody, TableCell, TableRow } from "@/components/ui/table";
 
 export default function SQLLogs({
   chain,
@@ -66,23 +67,37 @@ export default function SQLLogs({
         Refresh
       </Button>
       {error && <div className="text-red-500">{error}</div>}
-      {logs.slice(offset, offset + pageSize).map((log) => (
-        <Link
-          key={`${log.txHash}-${log.eventIndex}`}
-          className={cn(
-            "flex items-center gap-4 rounded-sm border border-gray-200 p-2 transition-all",
-            log.error ? "bg-red-200 hover:bg-red-300" : "hover:bg-accent",
-          )}
-          href={`/sql-log?chainId=${chain}&txnHash=${log.txHash}&index=${log.eventIndex}`}
-          target="_blank"
-        >
-          {log.error && <AlertCircle className="shrink-0" />}
-          <div className="shrink-0 text-sm text-muted-foreground">
-            {new Date(log.timestamp * 1000).toLocaleString()}
-          </div>
-          <div className="font-mono text-sm">{log.statement}</div>
-        </Link>
-      ))}
+      <div className="w-full">
+        <Table className="w-full table-fixed">
+          <TableBody>
+            {logs.slice(offset, offset + pageSize).map((log) => (
+              <TableRow key={`${log.txHash}-${log.eventIndex}`}>
+                <Link
+                  className={cn(
+                    "flex items-center rounded-sm border border-gray-200 p-2 transition-all",
+                    log.error
+                      ? "bg-red-200 hover:bg-red-300"
+                      : "hover:bg-accent",
+                  )}
+                  href={`/sql-log?chainId=${chain}&txnHash=${log.txHash}&index=${log.eventIndex}`}
+                  target="_blank"
+                >
+                  {log.error && <AlertCircle className="shrink-0" />}
+                  <TableCell className="shrink-0 text-sm text-muted-foreground">
+                    {new Date(log.timestamp * 1000).toLocaleString()}
+                  </TableCell>
+                  <TableCell
+                    colSpan={7}
+                    className="break-all font-mono text-sm"
+                  >
+                    <div>{log.statement}</div>
+                  </TableCell>
+                </Link>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </div>
       <Paginator
         numItems={logs.length}
         page={page}