IO-1533 Kanban Customizations

client/src/components/production-board-kanban/production-board-kanban.component.jsx

@@ -18,6 +18,7 @@ import { selectTechnician } from "../../redux/tech/tech.selectors";
 import { insertAuditTrail } from "../../redux/application/application.actions";
 import AuditTrailMapping from "../../utils/AuditTrailMappings";
 import ProductionBoardKanbanCardSettings from "./production-board-kanban.card-settings.component";
+import styled from "styled-components";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -145,8 +146,26 @@ export function ProductionBoardKanbanComponent({
     )
     .toFixed(1);
 
+  const Container = styled.div`
+    .react-kanban-card-skeleton,
+    .react-kanban-card,
+    .react-kanban-card-adder-form {
+      box-sizing: border-box;
+      max-width: ${associationSettings &&
+      associationSettings.kanban_settings &&
+      associationSettings.kanban_settings.compact
+        ? "145"
+        : "250"}px;
+      min-width: ${associationSettings &&
+      associationSettings.kanban_settings &&
+      associationSettings.kanban_settings.compact
+        ? "145"
+        : "250"}px;
+    }
+  `;
+
   return (
-    <div>
+    <Container>
       <IndefiniteLoading loading={isMoving} />
       <PageHeader
         title={
@@ -183,12 +202,12 @@ export function ProductionBoardKanbanComponent({
             technician,
             card,
             bodyshop,
-            associationSettings.kanban_settings
+            associationSettings && associationSettings.kanban_settings
           )
         }
         onCardDragEnd={handleDragEnd}
       />
-    </div>
+    </Container>
   );
 }
 export default connect(