fix: adjust table height for a few rows on /bookings (#18728)

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

@@ -244,17 +244,20 @@ function BookingsContent({ status }: BookingsProps) {
                 </div>
               )}
 
-              <DataTableWrapper
-                table={table}
-                testId={`${status}-bookings`}
-                bodyTestId="bookings"
-                hideHeader={true}
-                isPending={query.isFetching && !flatData}
-                hasNextPage={query.hasNextPage}
-                fetchNextPage={query.fetchNextPage}
-                isFetching={query.isFetching}
-                variant="compact"
-              />
+              {flatData.length > 0 && (
+                <DataTableWrapper
+                  table={table}
+                  testId={`${status}-bookings`}
+                  bodyTestId="bookings"
+                  hideHeader={true}
+                  isPending={query.isFetching && !flatData}
+                  hasNextPage={query.hasNextPage}
+                  fetchNextPage={query.fetchNextPage}
+                  isFetching={query.isFetching}
+                  variant="compact"
+                  containerClassName="!h-[inherit] max-h-[80dvh]"
+                />
+              )}
             </>
           )}
           {query.status === "success" && isEmpty && (

packages/features/data-table/components/DataTable.tsx

@@ -29,6 +29,8 @@ export type DataTableProps<TData, TValue> = {
   children?: React.ReactNode;
   identifier?: string;
   enableColumnResizing?: boolean;
+  className?: string;
+  containerClassName?: string;
 };
 
 export function DataTable<TData, TValue>({
@@ -44,6 +46,8 @@ export function DataTable<TData, TValue>({
   enableColumnResizing,
   testId,
   bodyTestId,
+  className,
+  containerClassName,
   ...rest
 }: DataTableProps<TData, TValue> & React.ComponentPropsWithoutRef<"div">) {
   const pathname = usePathname() as string | null;
@@ -88,7 +92,7 @@ export function DataTable<TData, TValue>({
 
   return (
     <div
-      className={classNames("grid", rest.className)}
+      className={classNames("grid", className)}
       style={{
         gridTemplateRows: "auto 1fr auto",
         gridTemplateAreas: "'header' 'body' 'footer'",
@@ -100,7 +104,8 @@ export function DataTable<TData, TValue>({
         onScroll={onScroll}
         className={classNames(
           "relative h-[80dvh] overflow-auto", // Set a fixed height for the container
-          "scrollbar-thin border-subtle relative rounded-md border"
+          "scrollbar-thin border-subtle relative rounded-md border",
+          containerClassName
         )}
         style={{ gridArea: "body" }}>
         <TableNew

packages/features/data-table/components/DataTableWrapper.tsx

@@ -23,6 +23,8 @@ export type DataTableWrapperProps<TData, TValue> = {
   totalDBRowCount?: number;
   ToolbarLeft?: React.ReactNode;
   ToolbarRight?: React.ReactNode;
+  className?: string;
+  containerClassName?: string;
   children?: React.ReactNode;
 };
 
@@ -39,6 +41,8 @@ export function DataTableWrapper<TData, TValue>({
   hideHeader,
   ToolbarLeft,
   ToolbarRight,
+  className,
+  containerClassName,
   children,
 }: DataTableWrapperProps<TData, TValue>) {
   const tableContainerRef = useRef<HTMLDivElement>(null);
@@ -59,6 +63,8 @@ export function DataTableWrapper<TData, TValue>({
       enableColumnResizing={true}
       hideHeader={hideHeader}
       variant={variant}
+      className={className}
+      containerClassName={containerClassName}
       onScroll={(e) => fetchMoreOnBottomReached(e.target as HTMLDivElement)}>
       <DataTableToolbar.Root>
         <div className="flex w-full flex-col gap-2">