From c2a60657d4eba9ae8ba47d4e53ce2dbb3eeb2234 Mon Sep 17 00:00:00 2001
From: Peer Richelsen <peeroke@gmail.com>
Date: Wed, 15 Dec 2021 13:47:38 +0000
Subject: [PATCH] removed overflow hidden from dialog to fix dropdowns (#1321)

Co-authored-by: Bailey Pumfleet <pumfleet@hey.com>
---
 components/Dialog.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/components/Dialog.tsx b/components/Dialog.tsx
index 86e4de64..2b13849f 100644
--- a/components/Dialog.tsx
+++ b/components/Dialog.tsx
@@ -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>
   );
 }