UI fixes for manual job creation + owners pages + vehicles pages + all jobs BOD-155

client/src/components/layout-form-row/layout-form-row.component.jsx

@@ -2,10 +2,17 @@ import React from "react";
 import { Row, Col, Typography } from "antd";
 import "./layout-form-row.styles.scss";
 
-export default function LayoutFormRow({ header, children }) {
+export default function LayoutFormRow({ header, children, grow = false }) {
   if (!!!children.length) {
     //We have only one element. It's going to get the whole thing.
-    return children;
+    return (
+      <div className='imex-form-row'>
+        {header ? (
+          <Typography.Title level={4}>{header}</Typography.Title>
+        ) : null}
+        {children}
+      </div>
+    );
   }
   const rowGutter = { gutter: [16, 16] };
 
@@ -15,16 +22,16 @@ export default function LayoutFormRow({ header, children }) {
         span: 24,
       },
       sm: {
-        span: 12,
+        span: !grow ? 12 : Math.max(12, 24 / children.length),
       },
       md: {
-        span: 8,
+        span: !grow ? 8 : Math.max(8, 24 / children.length),
       },
       lg: {
-        span: 6,
+        span: !grow ? 6 : Math.max(6, 24 / children.length),
       },
       xl: {
-        span: 4,
+        span: !grow ? 4 : Math.max(4, 24 / children.length),
       },
     };
   };