From 3d3a9c0dfb0b8cd1e2a4ea91e7fa99be740375a4 Mon Sep 17 00:00:00 2001
From: Eunjae Lee <hey@eunjae.dev>
Date: Mon, 3 Mar 2025 16:42:38 +0100
Subject: [PATCH] fix: use portal for DataTableSelectionBar (#19672)

---
 .../data-table/components/DataTableSelectionBar.tsx       | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/features/data-table/components/DataTableSelectionBar.tsx b/packages/features/data-table/components/DataTableSelectionBar.tsx
index fb25fea261..4f0c530b93 100644
--- a/packages/features/data-table/components/DataTableSelectionBar.tsx
+++ b/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
   );
 });