removed overflow hidden from dialog to fix dropdowns (#1321)

Co-authored-by: Bailey Pumfleet <pumfleet@hey.com>
This commit is contained in:
Peer Richelsen 2021-12-15 13:47:38 +00:00 committed by GitHub
parent d2965627d0
commit c2a60657d4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -6,7 +6,7 @@ export function Dialog(props: DialogProps) {
const { children, ...other } = props;
return (
<DialogPrimitive.Root {...other}>
<DialogPrimitive.Overlay className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
<DialogPrimitive.Overlay className="fixed inset-0 transition-opacity bg-gray-500 bg-opacity-75" />
{children}
</DialogPrimitive.Root>
);
@ -17,7 +17,7 @@ export const DialogContent = React.forwardRef<HTMLDivElement, DialogContentProps
({ children, ...props }, forwardedRef) => (
<DialogPrimitive.Content
{...props}
className="min-w-[360px] fixed left-1/2 top-1/2 p-6 text-left bg-white rounded shadow-xl overflow-hidden -translate-x-1/2 -translate-y-1/2 sm:align-middle sm:w-full sm:max-w-lg"
className="min-w-[360px] fixed left-1/2 top-1/2 p-6 text-left bg-white rounded shadow-xl -translate-x-1/2 -translate-y-1/2 sm:align-middle sm:w-full sm:max-w-lg"
ref={forwardedRef}>
{children}
</DialogPrimitive.Content>
@ -32,10 +32,10 @@ type DialogHeaderProps = {
export function DialogHeader(props: DialogHeaderProps) {
return (
<div className="mb-8">
<h3 className="font-cal text-gray-900 text-lg font-bold leading-6" id="modal-title">
<h3 className="text-lg font-bold leading-6 text-gray-900 font-cal" id="modal-title">
{props.title}
</h3>
{props.subtitle && <div className="text-gray-400 text-sm">{props.subtitle}</div>}
{props.subtitle && <div className="text-sm text-gray-400">{props.subtitle}</div>}
</div>
);
}
@ -43,7 +43,7 @@ export function DialogHeader(props: DialogHeaderProps) {
export function DialogFooter(props: { children: ReactNode }) {
return (
<div>
<div className="mt-5 flex space-x-2 justify-end">{props.children}</div>
<div className="flex justify-end mt-5 space-x-2">{props.children}</div>
</div>
);
}