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>
calcom · Oct 14, 2024 · 12bbbe3 · 12bbbe3
1 parent 2c7c9fd
commit 12bbbe3
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 8 deletions.
diff --git 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
@@ -1,13 +1,13 @@
 "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";
 
 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>
   );
 }