From 0e5775a087c8d88b3f7cd288bc2bb403f76d97d0 Mon Sep 17 00:00:00 2001
From: Eunjae Lee <hey@eunjae.dev>
Date: Mon, 3 Mar 2025 12:00:38 +0100
Subject: [PATCH] fix: adjust table height on /bookings (#19662)

---
 ...rHeightForMobile.ts => useStretchedHeightToBottom.ts} | 9 ++++++---
 .../web/modules/bookings/views/bookings-listing-view.tsx | 4 ++--
 2 files changed, 8 insertions(+), 5 deletions(-)
 rename apps/web/modules/bookings/hooks/{useProperHeightForMobile.ts => useStretchedHeightToBottom.ts} (79%)

diff --git a/apps/web/modules/bookings/hooks/useProperHeightForMobile.ts b/apps/web/modules/bookings/hooks/useStretchedHeightToBottom.ts
similarity index 79%
rename from apps/web/modules/bookings/hooks/useProperHeightForMobile.ts
rename to apps/web/modules/bookings/hooks/useStretchedHeightToBottom.ts
index c302847bd8..003d099853 100644
--- a/apps/web/modules/bookings/hooks/useProperHeightForMobile.ts
+++ b/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),
diff --git a/apps/web/modules/bookings/views/bookings-listing-view.tsx b/apps/web/modules/bookings/views/bookings-listing-view.tsx
index 09df18a107..e1a395d1b8 100644
--- a/apps/web/modules/bookings/views/bookings-listing-view.tsx
+++ b/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;