From dfdb04acf49ddfa401b7d0e508bd2bc2d5133621 Mon Sep 17 00:00:00 2001
From: sean-brydon <55134778+sean-brydon@users.noreply.github.com>
Date: Tue, 19 Nov 2024 23:04:45 +0000
Subject: [PATCH] chore: routing table nits (#17738)

* portal date preset selection with a high zindex

* increase height of data-table

* skeleton fixes
---
 .../insights/components/RoutingFormResponsesTable.tsx       | 6 +++---
 packages/features/insights/filters/DateSelect.tsx           | 2 ++
 packages/ui/components/data-table/DataTable.tsx             | 2 +-
 3 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/packages/features/insights/components/RoutingFormResponsesTable.tsx b/packages/features/insights/components/RoutingFormResponsesTable.tsx
index 866cb5ee98..1ae3f12a09 100644
--- a/packages/features/insights/components/RoutingFormResponsesTable.tsx
+++ b/packages/features/insights/components/RoutingFormResponsesTable.tsx
@@ -252,7 +252,7 @@ export function RoutingFormResponsesTable({
       }
     );
 
-  const { data, fetchNextPage, isFetching, hasNextPage } =
+  const { data, fetchNextPage, isFetching, hasNextPage, isLoading } =
     trpc.viewer.insights.routingFormResponses.useInfiniteQuery(
       {
         teamId: selectedTeamId,
@@ -403,10 +403,10 @@ export function RoutingFormResponsesTable({
     totalDBRowCount
   );
 
-  if (isHeadersLoading || (isFetching && !data)) {
+  if (isHeadersLoading || ((isFetching || isLoading) && !data)) {
     return (
       <div
-        className="grid h-[75dvh]"
+        className="grid h-[85dvh]"
         style={{ gridTemplateRows: "auto 1fr auto", gridTemplateAreas: "'header' 'body' 'footer'" }}>
         <div
           className="scrollbar-thin border-subtle relative h-full overflow-auto rounded-md border"
diff --git a/packages/features/insights/filters/DateSelect.tsx b/packages/features/insights/filters/DateSelect.tsx
index 5f3874e6fb..46d937bf24 100644
--- a/packages/features/insights/filters/DateSelect.tsx
+++ b/packages/features/insights/filters/DateSelect.tsx
@@ -92,6 +92,8 @@ export const DateSelect = () => {
         value={selectedPreset}
         className="w-40 capitalize text-black"
         defaultValue={selectedPreset}
+        styles={{ menuPortal: (base) => ({ ...base, zIndex: 9999 }) }}
+        menuPortalTarget={document.body}
         onChange={(e) => {
           if (e) {
             updateDateRange(e.value);
diff --git a/packages/ui/components/data-table/DataTable.tsx b/packages/ui/components/data-table/DataTable.tsx
index 6eaff2eb36..a013372074 100644
--- a/packages/ui/components/data-table/DataTable.tsx
+++ b/packages/ui/components/data-table/DataTable.tsx
@@ -59,7 +59,7 @@ export function DataTable<TData, TValue>({
   return (
     <div
       className={classNames(
-        "grid h-[75dvh]", // Set a fixed height for the container
+        "grid h-[85dvh]", // Set a fixed height for the container
         rest.className
       )}
       style={{