IO-1533 Kanban Customizations

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

@@ -2,7 +2,7 @@ import { useApolloClient } from "@apollo/client";
 import Board, { moveCard } from "@asseinfo/react-kanban";
 //import "@asseinfo/react-kanban/dist/styles.css";
 import "./production-board-kanban.styles.scss";
-import { notification, PageHeader, Space, Statistic } from "antd";
+import { Grid, notification, PageHeader, Space, Statistic } from "antd";
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -145,22 +145,42 @@ export function ProductionBoardKanbanComponent({
       0
     )
     .toFixed(1);
+  const selectedBreakpoint = Object.entries(Grid.useBreakpoint())
+    .filter((screen) => !!screen[1])
+    .slice(-1)[0];
+
+  const standardSizes = {
+    xs: "250",
+    sm: "250",
+    md: "250",
+    lg: "250",
+    xl: "250",
+    xxl: "250",
+  };
+  const compactSizes = {
+    xs: "150",
+    sm: "150",
+    md: "150",
+    lg: "150",
+    xl: "155",
+    xxl: "155",
+  };
+
+  const width = selectedBreakpoint
+    ? associationSettings &&
+      associationSettings.kanban_settings &&
+      associationSettings.kanban_settings.compact
+      ? compactSizes[selectedBreakpoint[0]]
+      : standardSizes[selectedBreakpoint[0]]
+    : "250";
 
   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;
+      max-width: ${width}px;
+      min-width: ${width}px;
     }
   `;