calcom/apps/web/components/ui/ModalContainer.tsx
Yassin Eldeeb 8c173c840b
fix(web): overflow with auto scroll instead of scroll (#2535)
* fix(readme): update setup steps

* fix(readme): update required node version in prerequisites section

* fix(web): overflow-auto instead of overflow-scroll

* Revert "fix(readme): update setup steps"

This reverts commit 2938d510c874e9298b82465baeae5af9181c01d8.

* Revert "fix(readme): update required node version in prerequisites section"

This reverts commit 848e1a153538475acb42daa6ddbd74dd474611f5.

Co-authored-by: Peer Richelsen <peeroke@gmail.com>
Co-authored-by: Bailey Pumfleet <pumfleet@hey.com>
2022-04-19 16:50:19 +01:00

35 lines
1 KiB
TypeScript

import classNames from "classnames";
import React from "react";
import { Dialog, DialogContent, DialogFooter } from "@calcom/ui/Dialog";
interface Props extends React.PropsWithChildren<any> {
wide?: boolean;
scroll?: boolean;
noPadding?: boolean;
isOpen: boolean;
onExit: () => void;
}
export default function ModalContainer(props: Props) {
return (
<div className="flex min-h-screen items-end justify-center px-4 pt-4 pb-20 text-center sm:block sm:p-0">
<Dialog open={props.isOpen} onOpenChange={props.onExit}>
<DialogContent>
<div
className={classNames(
"inline-block transform bg-white text-left align-bottom transition-all sm:align-middle",
{
"sm:w-full sm:max-w-lg ": !props.wide,
"sm:w-4xl sm:max-w-4xl": props.wide,
"overflow-auto": props.scroll,
"!p-0": props.noPadding,
}
)}>
{props.children}
</div>
</DialogContent>
</Dialog>
</div>
);
}