fix: adjust table height on /bookings (#19662)

apps/web/modules/bookings/hooks/useStretchedHeightToBottom.ts

@@ -4,7 +4,7 @@ import { useCallback, useEffect, useRef } from "react";
 
 // Dynamically adjusts DataTable height on mobile to prevent nested scrolling
 // and ensure the table fits within the viewport without overflowing (hacky)
-export function useProperHeightForMobile(ref: React.RefObject<HTMLDivElement>) {
+export function useStretchedHeightToBottom(ref: React.RefObject<HTMLDivElement>) {
   const lastOffsetY = useRef<number>();
   const lastWindowHeight = useRef<number>();
   const BOTTOM_NAV_HEIGHT = 64;
@@ -12,12 +12,15 @@ export function useProperHeightForMobile(ref: React.RefObject<HTMLDivElement>) {
 
   const updateHeight = useCallback(
     debounce(() => {
-      if (!ref.current || window.innerWidth >= 640) return;
+      if (!ref.current) return;
       const rect = ref.current.getBoundingClientRect();
       if (rect.top !== lastOffsetY.current || window.innerHeight !== lastWindowHeight.current) {
         lastOffsetY.current = rect.top;
         lastWindowHeight.current = window.innerHeight;
-        const height = window.innerHeight - lastOffsetY.current - BOTTOM_NAV_HEIGHT - BUFFER;
+        let height = window.innerHeight - lastOffsetY.current - BUFFER;
+        if (window.innerWidth < 640) {
+          height = height - BOTTOM_NAV_HEIGHT;
+        }
         ref.current.style.height = `${height}px`;
       }
     }, 200),

apps/web/modules/bookings/views/bookings-listing-view.tsx

@@ -33,7 +33,7 @@ import BookingListItem from "@components/booking/BookingListItem";
 import SkeletonLoader from "@components/booking/SkeletonLoader";
 
 import { useFacetedUniqueValues } from "~/bookings/hooks/useFacetedUniqueValues";
-import { useProperHeightForMobile } from "~/bookings/hooks/useProperHeightForMobile";
+import { useStretchedHeightToBottom } from "~/bookings/hooks/useStretchedHeightToBottom";
 import type { validStatuses } from "~/bookings/lib/validStatuses";
 
 type BookingListingStatus = (typeof validStatuses)[number];
@@ -109,7 +109,7 @@ function BookingsContent({ status }: BookingsProps) {
   const { t } = useLocale();
   const user = useMeQuery().data;
   const tableContainerRef = useRef<HTMLDivElement>(null);
-  useProperHeightForMobile(tableContainerRef);
+  useStretchedHeightToBottom(tableContainerRef);
 
   const eventTypeIds = useFilterValue("eventTypeId", ZMultiSelectFilterValue)?.data as number[] | undefined;
   const teamIds = useFilterValue("teamId", ZMultiSelectFilterValue)?.data as number[] | undefined;