fix: use portal for DataTableSelectionBar (#19672)

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

@@ -2,6 +2,7 @@
 
 import type { Table } from "@tanstack/react-table";
 import { forwardRef } from "react";
+import { createPortal } from "react-dom";
 
 import { classNames } from "@calcom/lib";
 import { Button, Icon } from "@calcom/ui";
@@ -47,17 +48,18 @@ const Root = forwardRef<
   React.HTMLAttributes<HTMLDivElement> & { showSelectionCount?: boolean }
 >(({ children, ...props }, ref) => {
   const { className, style, ...rest } = props;
-  return (
+  return createPortal(
     <div
       ref={ref}
       className={classNames(
-        "bg-default text-emphasis shadow-outline-gray-rested fixed bottom-0 left-0 z-40 flex w-full items-center space-x-1 overflow-x-auto border px-2 py-2 sm:space-x-2 md:bottom-4 md:left-1/2 md:z-auto md:w-fit md:-translate-x-1/2 md:transform md:space-x-3 md:overflow-x-hidden md:rounded-lg md:px-4",
+        "bg-default text-emphasis shadow-outline-gray-rested fixed bottom-0 left-0 flex w-full items-center space-x-1 overflow-x-auto border px-2 py-2 sm:space-x-2 md:bottom-4 md:left-1/2 md:z-auto md:w-fit md:-translate-x-1/2 md:transform md:space-x-3 md:overflow-x-hidden md:rounded-lg md:px-4",
         className
       )}
       style={{ ...style }}
       {...rest}>
       {children}
-    </div>
+    </div>,
+    document.body
   );
 });