fix(project-form-details) move notification row out of scrollable area

canonical · Dec 1, 2023 · 05557e8 · 05557e8
1 parent 4f47947
commit 05557e8
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 21 deletions.
diff --git a/src/pages/projects/forms/ProjectForm.tsx b/src/pages/projects/forms/ProjectForm.tsx
@@ -49,27 +49,31 @@ const ProjectForm: FC<Props> = ({
         isRestrictionsDisabled={!formik.values.restricted}
         toggleRestrictionsOpen={toggleMenu}
       />
-      <Row className="form-contents" key={section}>
-        <Col size={12}>
-          <NotificationRow />
-          {section === PROJECT_DETAILS && (
-            <ProjectDetailsForm
-              formik={formik}
-              project={project}
-              isEdit={isEdit}
-            />
-          )}
-          {section === RESOURCE_LIMITS && (
-            <ProjectResourceLimitsForm formik={formik} />
-          )}
-          {section === CLUSTERS && <ClusterRestrictionForm formik={formik} />}
-          {section === INSTANCES && <InstanceRestrictionForm formik={formik} />}
-          {section === DEVICE_USAGE && (
-            <DeviceUsageRestrictionForm formik={formik} />
-          )}
-          {section === NETWORKS && <NetworkRestrictionForm formik={formik} />}
-        </Col>
-      </Row>
+      <div className="details-form-wrapper">
+        <NotificationRow />
+        <Row className="form-contents" key={section}>
+          <Col size={12}>
+            {section === PROJECT_DETAILS && (
+              <ProjectDetailsForm
+                formik={formik}
+                project={project}
+                isEdit={isEdit}
+              />
+            )}
+            {section === RESOURCE_LIMITS && (
+              <ProjectResourceLimitsForm formik={formik} />
+            )}
+            {section === CLUSTERS && <ClusterRestrictionForm formik={formik} />}
+            {section === INSTANCES && (
+              <InstanceRestrictionForm formik={formik} />
+            )}
+            {section === DEVICE_USAGE && (
+              <DeviceUsageRestrictionForm formik={formik} />
+            )}
+            {section === NETWORKS && <NetworkRestrictionForm formik={formik} />}
+          </Col>
+        </Row>
+      </div>
     </Form>
   );
 };

diff --git a/src/sass/_forms.scss b/src/sass/_forms.scss
@@ -299,3 +299,9 @@
   overflow: auto;
   padding-right: $sph--large;
 }
+
+.details-form-wrapper {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}