layout based on indexer type

packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/explore/TablesViewer.tsx

@@ -18,7 +18,9 @@ import { Button } from "../../../../../../components/ui/Button";
 import { Input } from "../../../../../../components/ui/Input";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../../../../../../components/ui/Table";
 import { cn } from "../../../../../../utils";
+import { useChain } from "../../../../hooks/useChain";
 import { TData, TDataRow, useTableDataQuery } from "../../../../queries/useTableDataQuery";
+import { indexerForChainId } from "../../../../utils/indexerForChainId";
 import { EditableTableCell } from "./EditableTableCell";
 import { ExportButton } from "./ExportButton";
 import { typeSortingFn } from "./utils/typeSortingFn";
@@ -27,10 +29,12 @@ const initialSortingState: SortingState = [];
 const initialRows: TData["rows"] = [];
 
 export function TablesViewer({ table, query }: { table?: TableType; query?: string }) {
+  const { id: chainId } = useChain();
   const { data: tableData, isLoading: isTDataLoading, isFetched, isError, error } = useTableDataQuery({ table, query });
   const isLoading = isTDataLoading || !isFetched;
   const [globalFilter, setGlobalFilter] = useQueryState("filter", parseAsString.withDefault(""));
   const [sorting, setSorting] = useQueryState("sort", parseAsJson<SortingState>().withDefault(initialSortingState));
+  const indexer = indexerForChainId(chainId);
 
   const tableColumns: ColumnDef<TDataRow>[] = useMemo(() => {
     if (!table || !tableData) return [];
@@ -98,7 +102,11 @@ export function TablesViewer({ table, query }: { table?: TableType; query?: stri
   });
 
   return (
-    <div className="!-mt-10 space-y-4">
+    <div
+      className={cn("space-y-4", {
+        "!-mt-10": indexer.type === "hosted",
+      })}
+    >
       <div className="flex w-1/2 items-center gap-4">
         <Input
           placeholder="Filter..."