chore: routing table nits (#17738)

* portal date preset selection with a high zindex

* increase height of data-table

* skeleton fixes

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"

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);

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={{