public-offering
/
cal.pub0.org
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Allow scrolling when the dialog exceeds screen height (#3850)

pull/3843/head
Alex van Andel 2022-08-15 17:22:58 +01:00 committed by GitHub
parent 22a4a1b2ab
commit 358d733b5f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 19 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/web/components/eventtype/CreateEventType.tsx
View File

@ -152,7 +152,7 @@ export default function CreateEventTypeButton(props: CreateEventTypeBtnProps) {
options={props.options} options={props.options}
/> />
<DialogContent className="overflow-y-auto"> <DialogContent>
<div className="mb-4"> <div className="mb-4">
<h3 className="text-lg font-bold leading-6 text-gray-900" id="modal-title"> <h3 className="text-lg font-bold leading-6 text-gray-900" id="modal-title">
{teamId ? t("add_new_team_event_type") : t("add_new_event_type")} {teamId ? t("add_new_team_event_type") : t("add_new_event_type")}

35
packages/ui/Dialog.tsx
View File

@ -64,23 +64,24 @@ type DialogContentProps = React.ComponentProps<typeof DialogPrimitive["Content"]
export const DialogContent = React.forwardRef<HTMLDivElement, DialogContentProps>( export const DialogContent = React.forwardRef<HTMLDivElement, DialogContentProps>(
({ children, ...props }, forwardedRef) => ( ({ children, ...props }, forwardedRef) => (
<DialogPrimitive.Portal> <DialogPrimitive.Portal>
<DialogPrimitive.Overlay className="fadeIn fixed inset-0 z-40 bg-gray-500 bg-opacity-75 transition-opacity" /> <DialogPrimitive.Overlay className="fadeIn fixed inset-0 z-40 grid place-items-center overflow-y-auto bg-gray-500 bg-opacity-75 py-4 transition-opacity">
{/*zIndex one less than Toast */} {/*zIndex one less than Toast */}
<DialogPrimitive.Content <DialogPrimitive.Content
{...props} {...props}
className={classNames( className={classNames(
"fadeIn fixed left-1/2 top-1/2 z-[9998] min-w-[360px] -translate-x-1/2 -translate-y-1/2 rounded bg-white text-left shadow-xl focus-visible:outline-none sm:w-full sm:align-middle", "min-w-[360px] rounded bg-white text-left shadow-xl focus-visible:outline-none sm:w-full sm:align-middle",
props.size == "xl" props.size == "xl"
? "p-0.5 sm:max-w-[98vw]" ? "p-0.5 sm:max-w-[98vw]"
: props.size == "lg" : props.size == "lg"
? "p-6 sm:max-w-[70rem]" ? "p-6 sm:max-w-[70rem]"
: "p-6 sm:max-w-[35rem]", : "p-6 sm:max-w-[35rem]",
"max-h-[560px] overflow-visible overscroll-auto md:h-auto md:max-h-[inherit]", "max-h-[560px] overflow-visible overscroll-auto md:h-auto md:max-h-[inherit]",
`${props.className || ""}` `${props.className || ""}`
)} )}
ref={forwardedRef}> ref={forwardedRef}>
{children} {children}
</DialogPrimitive.Content> </DialogPrimitive.Content>
</DialogPrimitive.Overlay>
</DialogPrimitive.Portal> </DialogPrimitive.Portal>
) )
); );