Finished speed print setup + addition to print center modal. BOD-229

client/src/components/print-center-jobs/print-center-jobs.component.jsx

@@ -1,4 +1,4 @@
-import { Collapse } from "antd";
+import { Collapse, Row, Col } from "antd";
 import React from "react";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
@@ -7,7 +7,7 @@ import { toggleModalVisible } from "../../redux/modals/modals.actions";
 import { selectPrintCenter } from "../../redux/modals/modals.selectors";
 import {
   selectBodyshop,
-  selectCurrentUser
+  selectCurrentUser,
 } from "../../redux/user/user.selectors";
 import PrintCenterItem from "../print-center-item/print-center-item.component";
 import PrintCenterSpeedPrint from "../print-center-speed-print/print-center-speed-print.component";
@@ -24,29 +24,37 @@ const mapDispatchToProps = (dispatch) => ({
   toggleModalVisible: () => dispatch(toggleModalVisible("printCenter")),
 });
 
+const colSpan = { md: { span: 24 }, lg: { span: 12 } };
+
 export function PrintCenterJobsComponent({ bodyshop, printCenterModal }) {
   const { id: jobId } = printCenterModal.context;
   const JobsReportsList = JobsReports(null);
 
   return (
     <div>
-      <PrintCenterSpeedPrint job={jobId} />
-      <Collapse accordion>
-        {JobsReportsList.map((section) => (
-          <Collapse.Panel key={section.key} header={section.title}>
-            <ul style={{ columns: "2 auto" }}>
-              {section.items.map((item) => (
-                <PrintCenterItem
-                  key={item.key}
-                  item={item}
-                  id={jobId}
-                  disabled={item.disabled}
-                />
-              ))}
-            </ul>
-          </Collapse.Panel>
-        ))}
-      </Collapse>
+      <Row gutter={[16, 16]}>
+        <Col {...colSpan}>
+          <PrintCenterSpeedPrint jobId={jobId} />
+        </Col>
+        <Col {...colSpan}>
+          <Collapse accordion>
+            {JobsReportsList.map((section) => (
+              <Collapse.Panel key={section.key} header={section.title}>
+                <ul style={{ columns: "2 auto" }}>
+                  {section.items.map((item) => (
+                    <PrintCenterItem
+                      key={item.key}
+                      item={item}
+                      id={jobId}
+                      disabled={item.disabled}
+                    />
+                  ))}
+                </ul>
+              </Collapse.Panel>
+            ))}
+          </Collapse>
+        </Col>
+      </Row>
     </div>
   );
 }