From 12bbbe36173a6f4236c283c539e36252610d21f3 Mon Sep 17 00:00:00 2001
From: Anik Dhabal Babu <81948346+anikdhabal@users.noreply.github.com>
Date: Mon, 14 Oct 2024 06:46:37 +0530
Subject: [PATCH] fix: Daterangepicker is not opening in some browsers (#17087)

* fix: daterangepicker issue

* update

* fix: useTeamPlan isn't relevant on self-hosted

* chore: Revert UpgradeTeamsBadge fixes, unrelevant to this PR

* fix: Fix button width for other languages

---------

Co-authored-by: Alex van Andel <me@alexvanandel.com>
---
 .../CreateNewOutOfOfficeEntryButton.tsx         |  2 +-
 .../form/date-range-picker/DateRangePicker.tsx  | 17 ++++++++++-------
 2 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/packages/features/settings/outOfOffice/CreateNewOutOfOfficeEntryButton.tsx b/packages/features/settings/outOfOffice/CreateNewOutOfOfficeEntryButton.tsx
index 782fe3724b..fc9de2d2cd 100644
--- a/packages/features/settings/outOfOffice/CreateNewOutOfOfficeEntryButton.tsx
+++ b/packages/features/settings/outOfOffice/CreateNewOutOfOfficeEntryButton.tsx
@@ -25,7 +25,7 @@ const CreateNewOutOfOfficeEntry = () => {
     <>
       <Button
         color="primary"
-        className="flex w-20 items-center justify-between px-4"
+        className="flex items-center justify-between px-4"
         onClick={() => setOpenModal(true)}
         data-testid="add_entry_ooo">
         <Icon name="plus" size={16} /> {t("add")}
diff --git a/packages/ui/components/form/date-range-picker/DateRangePicker.tsx b/packages/ui/components/form/date-range-picker/DateRangePicker.tsx
index addd2e981e..e8fa563811 100644
--- a/packages/ui/components/form/date-range-picker/DateRangePicker.tsx
+++ b/packages/ui/components/form/date-range-picker/DateRangePicker.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import * as Popover from "@radix-ui/react-popover";
 import { format } from "date-fns";
 import * as React from "react";
 import type { DateRange } from "react-day-picker";
@@ -7,7 +8,6 @@ import type { DateRange } from "react-day-picker";
 import { classNames as cn } from "@calcom/lib";
 
 import { Button } from "../../button";
-import { Popover, PopoverContent, PopoverTrigger } from "../../popover";
 import { Calendar } from "./Calendar";
 
 type DatePickerWithRangeProps = {
@@ -37,8 +37,8 @@ export function DatePickerWithRange({
 
   return (
     <div className={cn("grid gap-2", className)}>
-      <Popover>
-        <PopoverTrigger asChild>
+      <Popover.Root>
+        <Popover.Trigger asChild>
           <Button
             id="date"
             color="secondary"
@@ -56,8 +56,11 @@ export function DatePickerWithRange({
               <span>Pick a date</span>
             )}
           </Button>
-        </PopoverTrigger>
-        <PopoverContent className="w-auto p-0" align="start">
+        </Popover.Trigger>
+        <Popover.Content
+          className="bg-default text-emphasis z-50 w-auto rounded-md border p-0 outline-none"
+          align="start"
+          sideOffset={4}>
           <Calendar
             initialFocus
             fromDate={minDate}
@@ -69,8 +72,8 @@ export function DatePickerWithRange({
             numberOfMonths={1}
             disabled={disabled}
           />
-        </PopoverContent>
-      </Popover>
+        </Popover.Content>
+      </Popover.Root>
     </div>
   );
 }