From 0e4309777ba022237174bd996ee9d9f0a72f64e8 Mon Sep 17 00:00:00 2001
From: Vijay <vijayraghav22@gmail.com>
Date: Wed, 5 Mar 2025 22:56:10 +0530
Subject: [PATCH] fix: make strict bottom position of DateRangePicker optional
 (#19768)

* make strictbottom optional

* chore
---
 .../settings/outOfOffice/CreateOrEditOutOfOfficeModal.tsx   | 1 +
 .../components/form/date-range-picker/DateRangePicker.tsx   | 6 ++++--
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/features/settings/outOfOffice/CreateOrEditOutOfOfficeModal.tsx b/packages/features/settings/outOfOffice/CreateOrEditOutOfOfficeModal.tsx
index b814f36792..7438ae0074 100644
--- a/packages/features/settings/outOfOffice/CreateOrEditOutOfOfficeModal.tsx
+++ b/packages/features/settings/outOfOffice/CreateOrEditOutOfOfficeModal.tsx
@@ -296,6 +296,7 @@ export const CreateOrEditOutOfOfficeEntryModal = ({
                       onDatesChange={(values) => {
                         onChange(values);
                       }}
+                      strictlyBottom={true}
                     />
                   )}
                 />
diff --git a/packages/ui/components/form/date-range-picker/DateRangePicker.tsx b/packages/ui/components/form/date-range-picker/DateRangePicker.tsx
index a8d371de52..721c8587e9 100644
--- a/packages/ui/components/form/date-range-picker/DateRangePicker.tsx
+++ b/packages/ui/components/form/date-range-picker/DateRangePicker.tsx
@@ -17,6 +17,7 @@ type DatePickerWithRangeProps = {
   maxDate?: Date;
   withoutPopover?: boolean;
   "data-testid"?: string;
+  strictlyBottom?: boolean;
 };
 
 export function DatePickerWithRange({
@@ -28,6 +29,7 @@ export function DatePickerWithRange({
   disabled,
   withoutPopover,
   "data-testid": testId,
+  strictlyBottom,
 }: React.HTMLAttributes<HTMLDivElement> & DatePickerWithRangeProps) {
   function handleDayClick(date: Date) {
     if (dates?.endDate) {
@@ -86,8 +88,8 @@ export function DatePickerWithRange({
           className="bg-default text-emphasis z-50 w-auto rounded-md border p-0 outline-none"
           align="start"
           sideOffset={4}
-          side="bottom"
-          avoidCollisions={false}>
+          side={strictlyBottom ? "bottom" : undefined}
+          avoidCollisions={!strictlyBottom}>
           {calendar}
         </Popover.Content>
       </Popover.Root>