From 8f7a880ff8b894dbf451481e7b242fccb08b1b8e Mon Sep 17 00:00:00 2001
From: jasquat <jasquat@users.noreply.github.com>
Date: Tue, 11 Feb 2025 12:02:13 -0500
Subject: [PATCH] fix spacing on model edit and new w/ burnettk

---
 .../a-spiffui-v3/views/ProcessModelEdit.tsx   | 23 +++++++++---------
 .../a-spiffui-v3/views/ProcessModelNew.tsx    | 20 +++++++++-------
 .../src/routes/ProcessModelEdit.tsx           | 24 +++++++++++--------
 .../src/routes/SpiffUIV3.tsx                  |  2 +-
 4 files changed, 38 insertions(+), 31 deletions(-)

diff --git a/spiffworkflow-frontend/src/a-spiffui-v3/views/ProcessModelEdit.tsx b/spiffworkflow-frontend/src/a-spiffui-v3/views/ProcessModelEdit.tsx
index b3b36a775..0dffb10d3 100644
--- a/spiffworkflow-frontend/src/a-spiffui-v3/views/ProcessModelEdit.tsx
+++ b/spiffworkflow-frontend/src/a-spiffui-v3/views/ProcessModelEdit.tsx
@@ -1,7 +1,6 @@
 import { useState, useEffect } from 'react';
 import { useParams } from 'react-router-dom';
-// @ts-ignore
-import { Typography, Container } from '@mui/material'; // Import MUI components
+import { Box, Typography } from '@mui/material'; // Import MUI components
 import ProcessBreadcrumb from '../components/ProcessBreadcrumb';
 import HttpService from '../services/HttpService';
 import ProcessModelForm from '../components/ProcessModelForm';
@@ -23,7 +22,7 @@ export default function ProcessModelEdit() {
   if (processModel) {
     setPageTitle([`Editing ${processModel.display_name}`]);
     return (
-      <Container>
+      <Box>
         <ProcessBreadcrumb
           hotCrumbs={[
             ['Process Groups', '/process-groups'],
@@ -34,16 +33,18 @@ export default function ProcessModelEdit() {
             },
           ]}
         />
-        <Typography variant="h4" component="h1">
+        <Typography variant="h2">
           Edit Process Model: {(processModel as any).id}
         </Typography>
-        <ProcessModelForm
-          mode="edit"
-          processGroupId={params.process_group_id}
-          processModel={processModel}
-          setProcessModel={setProcessModel}
-        />
-      </Container>
+        <Box mt={2}>
+          <ProcessModelForm
+            mode="edit"
+            processGroupId={params.process_group_id}
+            processModel={processModel}
+            setProcessModel={setProcessModel}
+          />
+        </Box>
+      </Box>
     );
   }
   return null;
diff --git a/spiffworkflow-frontend/src/a-spiffui-v3/views/ProcessModelNew.tsx b/spiffworkflow-frontend/src/a-spiffui-v3/views/ProcessModelNew.tsx
index 333577b41..dc72d0136 100644
--- a/spiffworkflow-frontend/src/a-spiffui-v3/views/ProcessModelNew.tsx
+++ b/spiffworkflow-frontend/src/a-spiffui-v3/views/ProcessModelNew.tsx
@@ -33,15 +33,17 @@ export default function ProcessModelNew() {
           },
         ]}
       />
-      <Typography variant="h1">Add Process Model</Typography>
-      <ProcessModelForm
-        mode="new"
-        processGroupId={unModifyProcessIdentifierForPathParam(
-          params.process_group_id || '',
-        )}
-        processModel={processModel}
-        setProcessModel={setProcessModel}
-      />
+      <Typography variant="h2">Add Process Model</Typography>
+      <Box mt={2}>
+        <ProcessModelForm
+          mode="new"
+          processGroupId={unModifyProcessIdentifierForPathParam(
+            params.process_group_id || '',
+          )}
+          processModel={processModel}
+          setProcessModel={setProcessModel}
+        />
+      </Box>
     </Box>
   );
 }
diff --git a/spiffworkflow-frontend/src/routes/ProcessModelEdit.tsx b/spiffworkflow-frontend/src/routes/ProcessModelEdit.tsx
index 0b5eee3ac..bc5e77fcb 100644
--- a/spiffworkflow-frontend/src/routes/ProcessModelEdit.tsx
+++ b/spiffworkflow-frontend/src/routes/ProcessModelEdit.tsx
@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react';
 import { useParams } from 'react-router-dom';
-// @ts-ignore
+import { Box, Typography } from '@mui/material';
 import ProcessBreadcrumb from '../components/ProcessBreadcrumb';
 import HttpService from '../services/HttpService';
 import ProcessModelForm from '../components/ProcessModelForm';
@@ -22,7 +22,7 @@ export default function ProcessModelEdit() {
   if (processModel) {
     setPageTitle([`Editing ${processModel.display_name}`]);
     return (
-      <>
+      <Box>
         <ProcessBreadcrumb
           hotCrumbs={[
             ['Process Groups', '/process-groups'],
@@ -33,14 +33,18 @@ export default function ProcessModelEdit() {
             },
           ]}
         />
-        <h1>Edit Process Model: {(processModel as any).id}</h1>
-        <ProcessModelForm
-          mode="edit"
-          processGroupId={params.process_group_id}
-          processModel={processModel}
-          setProcessModel={setProcessModel}
-        />
-      </>
+        <Typography variant="h1">
+          Edit Process Model: {(processModel as any).id}
+        </Typography>
+        <Box mt={2}>
+          <ProcessModelForm
+            mode="edit"
+            processGroupId={params.process_group_id}
+            processModel={processModel}
+            setProcessModel={setProcessModel}
+          />
+        </Box>
+      </Box>
     );
   }
   return null;
diff --git a/spiffworkflow-frontend/src/routes/SpiffUIV3.tsx b/spiffworkflow-frontend/src/routes/SpiffUIV3.tsx
index 3b0280f6f..522bbe7f0 100644
--- a/spiffworkflow-frontend/src/routes/SpiffUIV3.tsx
+++ b/spiffworkflow-frontend/src/routes/SpiffUIV3.tsx
@@ -305,7 +305,7 @@ export default function SpiffUIV3() {
                     element={<SecretShow />}
                   />
                   <Route
-                    path="/process-models/new"
+                    path="/process-models/:process_group_id/new"
                     element={<ProcessModelNew />}
                   />
                   <Route