From 5ddfbcf22549188f5a3f4fab5bf78dffaf8afdc3 Mon Sep 17 00:00:00 2001
From: Abhishek <abhiifour@gmail.com>
Date: Thu, 4 Dec 2025 01:16:28 +0530
Subject: [PATCH] fix: date picker content render issue (#25584)

Co-authored-by: Anik Dhabal Babu <81948346+anikdhabal@users.noreply.github.com>
---
 packages/ui/components/form/datepicker/DatePicker.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/ui/components/form/datepicker/DatePicker.tsx b/packages/ui/components/form/datepicker/DatePicker.tsx
index cf462dd58c..ae13bd42e9 100644
--- a/packages/ui/components/form/datepicker/DatePicker.tsx
+++ b/packages/ui/components/form/datepicker/DatePicker.tsx
@@ -45,12 +45,15 @@ const DatePicker = ({ minDate, disabled, date, onDatesChange, className }: Props
             {date ? <>{format(date, "LLL dd, y")}</> : <span>Pick a date</span>}
           </Button>
         </Popover.Trigger>
+        <Popover.Portal>
         <Popover.Content
           className="bg-default text-emphasis z-50 w-auto rounded-md border p-0 outline-none"
           align="start"
-          sideOffset={4}>
+          sideOffset={4}
+          >
           {calender}
         </Popover.Content>
+        </Popover.Portal>
       </Popover.Root>
     </div>
   );