Fix overflow problems and other styling issues

components/Dialog.tsx

@@ -6,21 +6,28 @@ import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { styled } from "../stitches.config";
 
 const overlayShow = keyframes({
-  "0%": { opacity: 0 },
+  "0%": { opacity: 0.01 },
   "100%": { opacity: 1 },
 });
 
 const contentShow = keyframes({
-  "0%": { opacity: 0, transform: "translate(-50%, -48%) scale(.96)" },
-  "100%": { opacity: 1, transform: "translate(-50%, -50%) scale(1)" },
+  "0%": { opacity: 0.01 },
+  "100%": { opacity: 1 },
 });
 const StyledOverlay = styled(DialogPrimitive.Overlay, {
-  zIndex: 1000,
+  zIndex: 9999,
   backgroundColor: blackA.blackA9,
   position: "fixed",
-  inset: 0,
+  // inset: 0,
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0,
+  display: "grid",
+  placeItems: "center",
+  overflowY: "auto",
   "@media (prefers-reduced-motion: no-preference)": {
-    animation: `${overlayShow} 150ms cubic-bezier(0.16, 1, 0.3, 1)`,
+    animation: `${overlayShow} 250ms cubic-bezier(0.16, 1, 0.3, 1)`,
   },
   ".dark &": {
     backgroundColor: blackA.blackA11,
@@ -32,22 +39,19 @@ const StyledContent = styled(DialogPrimitive.Content, {
   backgroundColor: "$mauve2",
   color: "$mauve12",
   borderRadius: "$md",
+  position: "relative",
   boxShadow:
     "0px 10px 38px -5px rgba(22, 23, 24, 0.25), 0px 10px 20px -5px rgba(22, 23, 24, 0.2)",
-  position: "fixed",
-  top: "50%",
-  left: "50%",
-  transform: "translate(-50%, -50%)",
   width: "90vw",
   maxWidth: "450px",
-  maxHeight: "85vh",
+  // maxHeight: "85vh",
   padding: 25,
   "@media (prefers-reduced-motion: no-preference)": {
     animation: `${contentShow} 150ms cubic-bezier(0.16, 1, 0.3, 1)`,
   },
   "&:focus": { outline: "none" },
   ".dark &": {
-    backgroundColor: "$mauve5",
+    backgroundColor: "$mauve3",
     boxShadow:
       "0px 10px 38px 0px rgba(0, 0, 0, 0.85), 0px 10px 20px 0px rgba(0, 0, 0, 0.6)",
   },
@@ -55,10 +59,11 @@ const StyledContent = styled(DialogPrimitive.Content, {
 
 const Content: React.FC<{ css?: Stiches.CSS }> = ({ css, children }) => {
   return (
-    <div style={{ overflowY: "auto" }}>
-      <StyledOverlay />
-      <StyledContent css={css}>{children}</StyledContent>
-    </div>
+    <>
+      <StyledOverlay>
+        <StyledContent>{children}</StyledContent>
+      </StyledOverlay>
+    </>
   );
 };
 
@@ -77,9 +82,10 @@ const StyledDescription = styled(DialogPrimitive.Description, {
 });
 
 // Exports
-export const Dialog = styled(DialogPrimitive.Root, { overflowY: "auto" });
+export const Dialog = styled(DialogPrimitive.Root);
 export const DialogTrigger = DialogPrimitive.Trigger;
 export const DialogContent = Content;
 export const DialogTitle = StyledTitle;
 export const DialogDescription = StyledDescription;
 export const DialogClose = DialogPrimitive.Close;
+export const DialogPortal = DialogPrimitive.Portal;

components/Select.tsx

@@ -38,6 +38,7 @@ const Select = forwardRef<any, Props>((props, ref) => {
         container: (provided) => {
           return {
             ...provided,
+            position: "relative",
           };
         },
         singleValue: (provided) => ({

components/SetHookDialog.tsx

@@ -98,8 +98,8 @@ export const SetHookDialog: React.FC<{ account: IAccount }> = ({ account }) => {
           Set Hook
         </Button>
       </DialogTrigger>
-      <form onSubmit={handleSubmit(onSubmit)}>
-        <DialogContent css={{ overflowY: "auto" }}>
+      <DialogContent>
+        <form onSubmit={handleSubmit(onSubmit)}>
           <DialogTitle>Deploy configuration</DialogTitle>
           <DialogDescription as="div">
             <Stack css={{ width: "100%", flex: 1 }}>
@@ -116,7 +116,7 @@ export const SetHookDialog: React.FC<{ account: IAccount }> = ({ account }) => {
                       {...field}
                       closeMenuOnSelect={false}
                       isMulti
-                      menuPosition="absolute"
+                      menuPosition="fixed"
                       options={transactionOptions}
                     />
                   )}
@@ -237,8 +237,8 @@ export const SetHookDialog: React.FC<{ account: IAccount }> = ({ account }) => {
               <X size="20px" />
             </Box>
           </DialogClose>
-        </DialogContent>
-      </form>
+        </form>
+      </DialogContent>
     </Dialog>
   );
 };