fix: add allowOverflow property (#6636)

* fix: add allowOverlfow property

Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in>

* fix: date override input dialog

Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in>

Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in>

apps/web/components/dialog/EditLocationDialog.tsx

@@ -205,7 +205,7 @@ export const EditLocationDialog = (props: ISetLocationDialog) => {
 
   return (
     <Dialog open={isOpenDialog} onOpenChange={(open) => setShowLocationModal(open)}>
-      <DialogContent disableOverflow>
+      <DialogContent>
         <div className="flex flex-row space-x-3">
           <div className="bg-secondary-100 mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full sm:mx-0 sm:h-10 sm:w-10">
             <FiMapPin className="text-primary-600 h-6 w-6" />

apps/web/components/eventtype/CustomInputTypeForm.tsx

@@ -78,7 +78,7 @@ const CustomInputTypeForm: FC<Props> = (props) => {
               defaultValue={selectedInputOption}
               options={inputOptions}
               isSearchable={false}
-              className="mt-1 mb-2 block w-full min-w-0 flex-1  text-sm"
+              className="mt-1 mb-2 block w-full min-w-0 flex-1 text-sm"
               onChange={(option) => option && field.onChange(option.value)}
               value={selectedInputOption}
               onBlur={field.onBlur}

apps/web/components/eventtype/EventTeamWebhooksTab.tsx

@@ -131,7 +131,10 @@ export const EventTeamWebhooksTab = ({
 
           {/* New webhook dialog */}
           <Dialog open={createModalOpen} onOpenChange={(isOpen) => !isOpen && setCreateModalOpen(false)}>
-            <DialogContent title={t("create_webhook")} description={t("create_webhook_team_event_type")}>
+            <DialogContent
+              enableOverflow
+              title={t("create_webhook")}
+              description={t("create_webhook_team_event_type")}>
               <WebhookForm
                 onSubmit={onCreateWebhook}
                 onCancel={() => setCreateModalOpen(false)}

packages/features/ee/teams/components/MemberChangeRoleModal.tsx

@@ -67,7 +67,7 @@ export default function MemberChangeRoleModal(props: {
   }
   return (
     <Dialog open={props.isOpen} onOpenChange={props.onExit}>
-      <DialogContent disableOverflow type="creation">
+      <DialogContent type="creation">
         <>
           <div className="mb-4 sm:flex sm:items-start">
             <div className="text-center sm:text-left">

packages/features/eventtypes/components/CreateEventTypeButton.tsx

@@ -136,6 +136,7 @@ const CreateEventTypeDialog = () => {
       ]}>
       <DialogContent
         type="creation"
+        enableOverflow
         title={teamId ? t("add_new_team_event_type") : t("add_new_event_type")}
         description={t("new_event_type_to_book_description")}>
         <Form

packages/features/schedules/components/DateOverrideInputDialog.tsx

@@ -5,6 +5,7 @@ import dayjs, { Dayjs } from "@calcom/dayjs";
 import { classNames } from "@calcom/lib";
 import { daysInMonth, yyyymmdd } from "@calcom/lib/date-fns";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
+import useMediaQuery from "@calcom/lib/hooks/useMediaQuery";
 import { WorkingHours } from "@calcom/types/schedule";
 import {
   Dialog,
@@ -176,11 +177,19 @@ const DateOverrideInputDialog = ({
   onChange: (newValue: TimeRange[]) => void;
   value?: TimeRange[];
 }) => {
+  const isMobile = useMediaQuery("(max-width: 768px)");
   const [open, setOpen] = useState(false);
+  {
+    /* enableOverflow is used to allow overflow when there are too many overrides to show on mobile.
+       ref:- https://github.com/calcom/cal.com/pull/6215
+      */
+  }
+  const enableOverflow = isMobile;
   return (
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogTrigger asChild>{Trigger}</DialogTrigger>
-      <DialogContent size="md">
+
+      <DialogContent enableOverflow={enableOverflow} size="md">
         <DateOverrideForm
           excludedDates={excludedDates}
           {...passThroughProps}

packages/ui/components/dialog/Dialog.tsx

@@ -63,11 +63,12 @@ type DialogContentProps = React.ComponentProps<typeof DialogPrimitive["Content"]
   closeText?: string;
   actionDisabled?: boolean;
   Icon?: SVGComponent;
-  disableOverflow?: boolean;
+  enableOverflow?: boolean;
 };
 
+// enableOverflow:- use this prop whenever content inside DialogContent could overflow and require scrollbar
 export const DialogContent = React.forwardRef<HTMLDivElement, DialogContentProps>(
-  ({ children, title, Icon, disableOverflow, type = "creation", ...props }, forwardedRef) => {
+  ({ children, title, Icon, enableOverflow, type = "creation", ...props }, forwardedRef) => {
     return (
       <DialogPrimitive.Portal>
         <DialogPrimitive.Overlay className="fadeIn fixed inset-0 bg-gray-500 bg-opacity-80 transition-opacity" />
@@ -83,7 +84,7 @@ export const DialogContent = React.forwardRef<HTMLDivElement, DialogContentProps
               ? "p-8 sm:max-w-[48rem]"
               : "p-8 sm:max-w-[35rem]",
             "max-h-[95vh]",
-            disableOverflow ? "overflow-visible" : "overflow-auto",
+            enableOverflow ? "overflow-auto" : "overflow-visible",
             `${props.className || ""}`
           )}
           ref={forwardedRef}>