UI Fixes on Job list page. Refactored form row component. BOD-155

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

@@ -7,19 +7,24 @@ export default function LayoutFormRow({ header, children }) {
     //We have only one element. It's going to get the whole thing.
     return children;
   }
-  const rowGutter = { gutter: [32, 32] };
-  const colSpan = (maxspan) => {
+  const rowGutter = { gutter: [16, 16] };
+
+  const colSpan = (spanOverride) => {
     return {
       xs: {
         span: 24,
       },
+      sm: {
+        span: 12,
+      },
       md: {
-        span: !!maxspan ? Math.min(12, maxspan) : 12,
+        span: 8,
       },
       lg: {
-        span: !!maxspan
-          ? Math.min(Math.max(24 / children.length, 6), maxspan)
-          : Math.max(24 / children.length, 6),
+        span: 6,
+      },
+      xl: {
+        span: 4,
       },
     };
   };
@@ -29,7 +34,7 @@ export default function LayoutFormRow({ header, children }) {
       {header ? <Typography.Title level={4}>{header}</Typography.Title> : null}
       <Row {...rowGutter}>
         {children.map((c, idx) => (
-          <Col key={idx} {...colSpan(c.props && c.props.maxspan)}>
+          <Col key={idx} {...colSpan(c.props && c.props.span)}>
             {c}
           </Col>
         ))}
@@ -37,3 +42,40 @@ export default function LayoutFormRow({ header, children }) {
     </div>
   );
 }
+
+// export default function LayoutFormRow({ header, children }) {
+//   if (!!!children.length) {
+//     //We have only one element. It's going to get the whole thing.
+//     return children;
+//   }
+//   const rowGutter = { gutter: [16, 16] };
+
+//   const colSpan = (maxspan) => {
+//     return {
+//       xs: {
+//         span: 24,
+//       },
+//       md: {
+//         span: !!maxspan ? Math.min(12, maxspan) : 12,
+//       },
+//       lg: {
+//         span: !!maxspan
+//           ? Math.min(Math.max(24 / children.length, 6), maxspan)
+//           : Math.max(24 / children.length, 6),
+//       },
+//     };
+//   };
+
+//   return (
+//     <div className='imex-form-row'>
+//       {header ? <Typography.Title level={4}>{header}</Typography.Title> : null}
+//       <Row {...rowGutter}>
+//         {children.map((c, idx) => (
+//           <Col key={idx} {...colSpan(c.props && c.props.maxspan)}>
+//             {c}
+//           </Col>
+//         ))}
+//       </Row>
+//     </div>
+//   );
+// }

client/src/components/layout-form-row/layout-form-row.styles.scss

@@ -2,5 +2,19 @@
 .imex-form-row {
   .ant-row {
     margin-bottom: 0rem;
+
+    .ant-form-item-label {
+      padding: 0rem;
+    }
+
+    label {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      width: 100%;
+      display: inline-block;
+      padding: 0rem;
+      margin: 0rem;
+    }
   }
 }