wrap field template so we can style with margin bottom

spiffworkflow-frontend/src/themes/carbon/FieldTemplate/FieldTemplate.tsx

@@ -34,30 +34,32 @@ function FieldTemplate({
     return <div style={{ display: 'none' }}>{children}</div>;
   }
   return (
-    <WrapIfAdditionalTemplate
+    <div className="rjsf-field">
-      classNames={classNames}
+      <WrapIfAdditionalTemplate
-      disabled={disabled}
+        classNames={classNames}
-      id={id}
+        disabled={disabled}
-      label={label}
+        id={id}
-      onDropPropertyClick={onDropPropertyClick}
+        label={label}
-      onKeyChange={onKeyChange}
+        onDropPropertyClick={onDropPropertyClick}
-      readonly={readonly}
+        onKeyChange={onKeyChange}
-      required={required}
+        readonly={readonly}
-      schema={schema}
+        required={required}
-      uiSchema={uiSchema}
+        schema={schema}
-      registry={registry}
+        uiSchema={uiSchema}
-    >
+        registry={registry}
-      <FormControl fullWidth error={!!rawErrors.length} required={required}>
+      >
-        {children}
+        <FormControl fullWidth error={!!rawErrors.length} required={required}>
-        {displayLabel && rawDescription ? (
+          {children}
-          <Typography variant="caption" color="textSecondary">
+          {displayLabel && rawDescription ? (
-            {rawDescription}
+            <Typography variant="caption" color="textSecondary">
-          </Typography>
+              {rawDescription}
-        ) : null}
+            </Typography>
-        {errors}
+          ) : null}
-        {help}
+          {errors}
-      </FormControl>
+          {help}
-    </WrapIfAdditionalTemplate>
+        </FormControl>
+      </WrapIfAdditionalTemplate>
+    </div>
   );
 }
 

spiffworkflow-frontend/src/themes/carbon/index.css

@@ -1,7 +1,3 @@
-button.react-json-schema-form-submit-button {
-  margin-top: 1.5em;
-}
-
 .rjsf .header {
   font-weight: 400;
   font-size: 20px;
@@ -17,6 +13,7 @@ button.react-json-schema-form-submit-button {
   margin-bottom: 1em;
 }
 
-.rjsf .input {
+/* for some reason it wraps the entire form using FieldTemplate.jsx, which is where we added the rjsf-field thing (which is only intended for fields, not entire forms. hence the double rjsf-field reference, only for rjsf-fields inside rjsf-fields, so we don't get double margin after the last field */
+.rjsf .rjsf-field .rjsf-field {
   margin-bottom: 2em;
 }