fix(dialog): align center and overflow issue

.stylelintrc.js

@@ -13,6 +13,10 @@ module.exports = {
     // 'stylelint-config-prettier'
   ],
   rules: {
+    "selector-pseudo-class-no-unknown": [
+      true,
+      { ignorePseudoClasses: ["global"] },
+    ],
     "font-family-name-quotes": null,
     "font-family-no-missing-generic-family-keyword": null,
     "max-nesting-depth": [
@@ -24,7 +28,7 @@ module.exports = {
     "declaration-block-no-duplicate-properties": true,
     "no-duplicate-selectors": true,
     "no-descending-specificity": null,
-    "selector-class-pattern": "^([a-z][a-z0-9]*)((-|__)[a-z0-9]+)*$",
+    "selector-class-pattern": null,
     "value-no-vendor-prefix": [true, { ignoreValues: ["box"] }],
     "at-rule-no-unknown": [
       true,

src/components/base/base-dialog.module.scss

@@ -0,0 +1,5 @@
+.basePageTransition {
+  :global(.MuiDialog-paper) {
+    max-height: calc(100vh - 64px);
+  }
+}

src/components/base/base-dialog.tsx

@@ -1,3 +1,4 @@
+import { classNames } from "@/utils";
 import { LoadingButton } from "@mui/lab";
 import {
   Button,
@@ -11,6 +12,8 @@ import {
 import { TransitionProps } from "@mui/material/transitions";
 import { AnimatePresence, motion } from "framer-motion";
 import React, { ReactNode } from "react";
+import styles from "./base-dialog.module.scss";
+
 interface Props {
   title: ReactNode;
   open: boolean;
@@ -50,7 +53,6 @@ export function BaseDialog(props: Props) {
 
   return (
     <Dialog
-      className="123"
       open={open}
       onClose={props.onClose}
       keepMounted
@@ -93,12 +95,22 @@ const BaseDialogTransition = React.forwardRef(function BaseDialogTransition(
     <AnimatePresence>
       {inProp && (
         <motion.div
+          className={classNames(styles.basePageTransition)}
           style={{
             width: "fit-content",
             height: "fit-content",
-            margin: "auto",
+            // margin: "auto",
+            maxHeight: "100vh",
+            position: "fixed",
+          }}
+          initial={{
+            opacity: 0,
+            scale: 0,
+            top: "50%",
+            left: "50%",
+            translateX: "-50%",
+            translateY: "-50%",
           }}
-          initial={{ opacity: 0, scale: 0 }}
           animate={{
             opacity: 1,
             scale: 1,