style: modal dialog issue

open-craft · Aug 10, 2021 · f0d5589 · f0d5589
1 parent fe1223c
commit f0d5589
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 11 deletions.
diff --git a/src/generic/FormSwitchGroup.jsx b/src/generic/FormSwitchGroup.jsx
@@ -25,7 +25,7 @@ export default function FormSwitchGroup({
       className={className}
     >
       <div className="d-flex flex-column">
-        <div className="d-flex flex-row justify-content-between align-items-center pb-2 z-index-3">
+        <div className="d-flex flex-row justify-content-between align-items-center pb-2">
           <Form.Label className="h4 text-primary-500 m-0">
             {label}
           </Form.Label>

diff --git a/src/pages-and-resources/app-settings-modal/AppSettingsModal.jsx b/src/pages-and-resources/app-settings-modal/AppSettingsModal.jsx
@@ -106,6 +106,11 @@ function AppSettingsModal({
       hasCloseButton={isMobile}
       isFullscreenOnMobile
     >
+      <ModalDialog.Header>
+        <ModalDialog.Title>
+          {title}
+        </ModalDialog.Title>
+      </ModalDialog.Header>
       {
         loadingStatus === RequestStatus.SUCCESSFUL && (
           <Formik
@@ -123,13 +128,14 @@ function AppSettingsModal({
             onSubmit={handleFormSubmit}
           >
             {(formikProps) => (
-              <Form onSubmit={formikProps.handleSubmit}>
-                <ModalDialog.Header>
-                  <ModalDialog.Title>
-                    {title}
-                  </ModalDialog.Title>
-                </ModalDialog.Header>
-                <ModalDialog.Body className="overflow-hidden">
+              <Form
+                onSubmit={formikProps.handleSubmit}
+                style={{
+                  width: '100%', height: '100%', display: 'flex', 'flex-flow': 'column',
+                }}
+              >
+
+                <ModalDialog.Body>
                   <FormSwitchGroup
                     id={`enable-${appId}-toggle`}
                     name="enabled"
@@ -166,9 +172,6 @@ function AppSettingsModal({
                 <ModalDialog.Footer
                   className={classNames(
                     'p-4',
-                    {
-                      'modal-footer': isMobile,
-                    },
                   )}
                 >
                   <ActionRow>