Updating styling on parts and invoicing modals BOD-404

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

@@ -2,7 +2,12 @@ import React from "react";
 import { Row, Col, Typography } from "antd";
 import "./layout-form-row.styles.scss";
 
-export default function LayoutFormRow({ header, children, grow = false }) {
+export default function LayoutFormRow({
+  header,
+  children,
+  grow = false,
+  ...restProps
+}) {
   if (!!!children.length) {
     //We have only one element. It's going to get the whole thing.
     return (
@@ -20,7 +25,7 @@ export default function LayoutFormRow({ header, children, grow = false }) {
     if (spanOverride) return { span: spanOverride };
     return {
       xs: {
-        span: 24,
+        span: !grow ? 24 : Math.max(12, 24 / children.length),
       },
       sm: {
         span: !grow ? 12 : Math.max(12, 24 / children.length),
@@ -38,7 +43,7 @@ export default function LayoutFormRow({ header, children, grow = false }) {
   };
 
   return (
-    <div className="imex-form-row">
+    <div className="imex-form-row" {...restProps}>
       {header ? <Typography.Title level={4}>{header}</Typography.Title> : null}
       <Row {...rowGutter}>
         {children.map(