From f0d558931069d42f4a04fec1b809f272bb07613a Mon Sep 17 00:00:00 2001
From: Mehak Nasir <mehaknasir94@gmail.com>
Date: Tue, 3 Aug 2021 20:59:20 +0500
Subject: [PATCH] style: modal dialog issue

---
 src/generic/FormSwitchGroup.jsx               |  2 +-
 .../app-settings-modal/AppSettingsModal.jsx   | 23 +++++++++++--------
 2 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/src/generic/FormSwitchGroup.jsx b/src/generic/FormSwitchGroup.jsx
index 48c9050e2..1713d6689 100644
--- 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
index f3501d9df..0be5f1960 100644
--- 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>