fix: make events empty state full width in grid table (#339)

Co-authored-by: vasek <vasek.mlejnsky@gmail.com>
Co-authored-by: Ben Fornefeld <50748440+ben-fornefeld@users.noreply.github.com>

Author: 3 people

src/features/dashboard/common/virtualized-table-ui.tsx

@@ -2,6 +2,7 @@ import type { VirtualItem, Virtualizer } from '@tanstack/react-virtual'
 import type { CSSProperties, ReactNode } from 'react'
 import { Loader } from '@/ui/primitives/loader'
 import { TableBody, TableCell, TableRow } from '@/ui/primitives/table'
+import { TableEmptyRowBorder } from '@/ui/primitives/table-empty-row-border'
 
 export const getVirtualizedRowStyle = (
   virtualRow: VirtualItem,
@@ -51,3 +52,36 @@ export const VirtualizedTableLoaderBody = () => (
     </TableRow>
   </TableBody>
 )
+
+interface VirtualizedTableEmptyStateProps {
+  children: ReactNode
+}
+
+const EMPTY_STATE_ROWS = Array.from({ length: 3 })
+
+export const VirtualizedTableEmptyState = ({
+  children,
+}: VirtualizedTableEmptyStateProps) => (
+  <TableBody className="grid">
+    <TableRow className="flex min-w-full">
+      <TableCell className="flex-1 p-0">
+        <div className="w-full gap-2 relative flex flex-col justify-center items-center">
+          {EMPTY_STATE_ROWS.map((_, index) => (
+            <div
+              key={index}
+              className="h-11 w-full border border-bg-highlight relative flex items-center gap-2 justify-center overflow-hidden"
+            >
+              <TableEmptyRowBorder className="absolute bottom-0 left-0 rotate-180 opacity-99" />
+              <TableEmptyRowBorder className="absolute bottom-0 right-0 opacity-99" />
+              {index === 1 ? (
+                <div className="text-fg prose-body-highlight flex items-center justify-center gap-2 px-2 text-center whitespace-nowrap">
+                  {children}
+                </div>
+              ) : null}
+            </div>
+          ))}
+        </div>
+      </TableCell>
+    </TableRow>
+  </TableBody>
+)

src/features/dashboard/sandbox/events/table.tsx

@@ -8,6 +8,7 @@ import {
 import { useMemo } from 'react'
 import type { SandboxEventModel } from '@/core/modules/sandboxes/models'
 import {
+  VirtualizedTableEmptyState,
   VirtualizedTableLoaderBody,
   VirtualizedTableRow,
 } from '@/features/dashboard/common/virtualized-table-ui'
@@ -21,7 +22,6 @@ import {
   Table,
   TableBody,
   TableCell,
-  TableEmptyState,
   TableHead,
   TableHeader,
   TableRow,
@@ -90,12 +90,10 @@ export const SandboxEventsTable = ({
           scrollContainer={scrollContainer}
         />
       ) : (
-        <TableBody>
-          <TableEmptyState colSpan={4}>
-            <HistoryIcon className="size-5" />
-            No events found
-          </TableEmptyState>
-        </TableBody>
+        <VirtualizedTableEmptyState>
+          <HistoryIcon className="size-5" />
+          No events found
+        </VirtualizedTableEmptyState>
       )}
     </Table>
   )