heading for instances on model show page, move instances below files, add margins

spiffworkflow-frontend/src/index.css

@@ -147,6 +147,10 @@ h1.with-icons {
   margin-bottom: 1em;
 }
 
+.with-top-margin {
+  margin-top: 1em;
+}
+
 .with-large-bottom-margin {
   margin-bottom: 3em;
 }
@@ -283,3 +287,8 @@ td.actions-cell {
   color: #525252;
   margin-bottom: 1em;
 }
+
+/* top and bottom margin since this is sort of the middle of three sections on the process model show page */
+.process-model-files-section {
+  margin: 2em 0;
+}

spiffworkflow-frontend/src/routes/GroupedTasks.tsx

@@ -5,7 +5,8 @@ import TasksWaitingForMyGroups from '../components/TasksWaitingForMyGroups';
 export default function GroupedTasks() {
   return (
     <>
-      {/* be careful moving these around since the first two have with-large-bottom-margin in order to get some space between the three table sections */}
+      {/* be careful moving these around since the first two have with-large-bottom-margin in order to get some space between the three table sections. */}
+      {/* i wish Stack worked to add space just between top-level elements */}
       <TasksForMyOpenProcesses />
       <TasksWaitingForMe />
       <TasksWaitingForMyGroups />

spiffworkflow-frontend/src/routes/ProcessModelShow.tsx

@@ -91,7 +91,7 @@ export default function ProcessModelShow() {
   const processInstanceRunResultTag = () => {
     if (processInstance) {
       return (
-        <div className="alert alert-success" role="alert">
+        <div className="alert alert-success with-top-margin" role="alert">
           <p>
             Process Instance {processInstance.id} kicked off (
             <Link
@@ -398,12 +398,16 @@ export default function ProcessModelShow() {
     );
   };
 
-  const processModelButtons = () => {
+  const processModelFilesSection = () => {
     if (!processModel) {
       return null;
     }
     return (
-      <Grid condensed fullWidth className="megacondensed">
+      <Grid
+        condensed
+        fullWidth
+        className="megacondensed process-model-files-section"
+      >
         <Column md={5} lg={9} sm={3}>
           <Accordion align="end" open>
             <AccordionItem
@@ -477,7 +481,10 @@ export default function ProcessModelShow() {
   const processInstanceListTableButton = () => {
     if (processModel) {
       return (
-        <Grid fullWidth>
+        <Grid fullWidth condensed>
+          <Column sm={{ span: 3 }} md={{ span: 4 }} lg={{ span: 3 }}>
+            <h2>Process Instances</h2>
+          </Column>
           <Column
             sm={{ span: 1, offset: 3 }}
             md={{ span: 1, offset: 7 }}
@@ -563,6 +570,7 @@ export default function ProcessModelShow() {
           </Can>
         </Stack>
         {processInstanceRunResultTag()}
+        {processModelFilesSection()}
         <Can I="GET" a={targetUris.processInstanceListPath} ability={ability}>
           {processInstanceListTableButton()}
           <ProcessInstanceListTable
@@ -571,10 +579,7 @@ export default function ProcessModelShow() {
             perPageOptions={[2, 5, 25]}
             showReports={false}
           />
-          <br />
-          <br />
         </Can>
-        {processModelButtons()}
       </>
     );
   }