fix dialog overflow

zizdlp · Sep 21, 2024 · bcd6e3d · bcd6e3d
1 parent 4d19729
commit bcd6e3d
Show file tree

Hide file tree

Showing 6 changed files with 10 additions and 23 deletions.
diff --git a/zbook_frontend/src/components/DialogComponent.tsx b/zbook_frontend/src/components/DialogComponent.tsx
@@ -27,13 +27,15 @@ export default function DialogComponent(props: DialogCompentProps) {
           scrollbar scrollbar-thumb-rounded-full scrollbar-track-rounded-full scrollbar-w-[6px]
         scrollbar-thumb-slate-200 scrollbar-track-slate-100
         dark:scrollbar-thumb-slate-500/50 dark:scrollbar-track-slate-500/[0.16]
-          dark:text-slate-300 md:p-20 flex flex-col justify-start pt-4 md:justify-center lg:p-28"
+          dark:text-slate-300 flex flex-col py-4"
           >
-            <div className="mx-4 md:mx-[max(0px,calc(50%-25rem))] ">
-              <Dialog.Panel className="flex overflow-hidden flex-col  border rounded-md md:rounded-lg bg-white/85 dark:bg-slate-800/85 border-white/85 dark:border-slate-800/85">
+            <div className="grow hidden md:block"></div>
+            <div className="mx-4 md:mx-[max(0px,calc(50%-25rem))]">
+              <Dialog.Panel className="border rounded-md md:rounded-lg bg-white/85 dark:bg-slate-800/85 border-white/85 dark:border-slate-800/85">
                 {props.children}
               </Dialog.Panel>
             </div>
+            <div className="grow hidden md:block"></div>
           </div>
         </Transition.Child>
       </Dialog>

diff --git a/zbook_frontend/src/providers/dialogs/CreateInvitation.tsx b/zbook_frontend/src/providers/dialogs/CreateInvitation.tsx
@@ -70,10 +70,7 @@ export default function CreateInvitation() {
       showDialog={createInvitationOpen}
       setShowDialog={setCreateInvitationOpen}
     >
-      <form
-        className="w-fll flex lg:block md:overflow-hidden grow  justify-center overflow-auto  items-center  px-4 py-4  text-slate-700"
-        onSubmit={formik.handleSubmit}
-      >
+      <form className="px-4 py-4 text-slate-700" onSubmit={formik.handleSubmit}>
         <div className="sm:overflow-hidden sm:rounded-md w-full">
           <div className="grid grid-cols-6 gap-4 gap-x-8 p-2">
             <div className="col-span-6 justify-center flex-center">

diff --git a/zbook_frontend/src/providers/dialogs/CreateRepoDialog.tsx b/zbook_frontend/src/providers/dialogs/CreateRepoDialog.tsx
@@ -130,10 +130,7 @@ export default function CreateRepoDialog() {
       showDialog={createRepoOpen}
       setShowDialog={setCreateRepoOpen}
     >
-      <form
-        className="w-fll flex lg:block md:overflow-hidden grow  justify-center overflow-auto  items-center  px-4 py-4  text-slate-700 "
-        onSubmit={formik.handleSubmit}
-      >
+      <form className="px-4 py-4 text-slate-700" onSubmit={formik.handleSubmit}>
         <div className="sm:overflow-hidden sm:rounded-md w-full">
           <div className="grid grid-cols-6 gap-4 gap-x-8 p-2">
             <div className="col-span-6 justify-center flex-center">

diff --git a/zbook_frontend/src/providers/dialogs/CreateSystemNotification.tsx b/zbook_frontend/src/providers/dialogs/CreateSystemNotification.tsx
@@ -83,10 +83,7 @@ export default function CreateSystemNotification() {
       showDialog={CreateSystemNotificationOpen}
       setShowDialog={setCreateSystemNotificationOpen}
     >
-      <form
-        className="w-fll flex lg:block md:overflow-hidden grow  justify-center overflow-auto  items-center  px-4 py-4  text-slate-700"
-        onSubmit={formik.handleSubmit}
-      >
+      <form className="px-4 py-4 text-slate-700" onSubmit={formik.handleSubmit}>
         <div className="sm:overflow-hidden sm:rounded-md w-full">
           <div className="grid grid-cols-6 gap-4 gap-x-8 p-2">
             <div className="col-span-6 justify-center flex-center">

diff --git a/zbook_frontend/src/providers/dialogs/UpdateRepoDialog.tsx b/zbook_frontend/src/providers/dialogs/UpdateRepoDialog.tsx
@@ -104,10 +104,7 @@ export default function UpdateRepoDialog() {
       showDialog={updateRepoOpen}
       setShowDialog={setUpdateRepoOpen}
     >
-      <form
-        className="w-fll flex lg:block md:overflow-hidden grow  justify-center overflow-auto  items-center  px-4 py-4  text-slate-700 "
-        onSubmit={formik.handleSubmit}
-      >
+      <form className="px-4 py-4 text-slate-700" onSubmit={formik.handleSubmit}>
         <div className="sm:overflow-hidden sm:rounded-md w-full">
           <div className="grid grid-cols-6 gap-4 gap-x-8 p-2">
             <div className="col-span-6 justify-center flex-center">

diff --git a/zbook_frontend/src/providers/dialogs/UpdateUserDialog.tsx b/zbook_frontend/src/providers/dialogs/UpdateUserDialog.tsx
@@ -101,10 +101,7 @@ export default function UpdateUserDialog() {
       showDialog={updateUserOpen}
       setShowDialog={setUpdateUserOpen}
     >
-      <form
-        className="w-fll flex lg:block md:overflow-hidden grow  justify-center overflow-auto  items-center  px-4 py-4  text-slate-700"
-        onSubmit={formik.handleSubmit}
-      >
+      <form className="px-4 py-4 text-slate-700" onSubmit={formik.handleSubmit}>
         <div className="sm:overflow-hidden sm:rounded-md w-full">
           <div className="grid grid-cols-6 gap-4 gap-x-8 p-2">
             <div className="col-span-6 justify-center flex-center">