- So so many things

Signed-off-by: Dave Richer <dave@imexsystems.ca>

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

@@ -28,7 +28,7 @@ const cardColor = (ssbuckets, totalHrs) => {
 const getContrastYIQ = (bgColor) =>
   (bgColor.r * 299 + bgColor.g * 587 + bgColor.b * 114) / 1000 >= 128 ? "black" : "white";
 
-export default function ProductionBoardCard({ technician, card, bodyshop, cardSettings, clone }) {
+export default function ProductionBoardCard({ technician, card, bodyshop, cardSettings, clone, style }) {
   const { t } = useTranslation();
   const { metadata } = card;
 
@@ -72,7 +72,8 @@ export default function ProductionBoardCard({ technician, card, bodyshop, cardSe
       size="small"
       style={{
         backgroundColor: cardSettings?.cardcolor && `rgba(${bgColor.r},${bgColor.g},${bgColor.b},${bgColor.a})`,
-        color: cardSettings?.cardcolor && contrastYIQ
+        color: cardSettings?.cardcolor && contrastYIQ,
+        ...style
       }}
       title={
         <Space>
@@ -103,10 +104,10 @@ export default function ProductionBoardCard({ technician, card, bodyshop, cardSe
         </Link>
       }
     >
-      {!clone && (
+      <Row>
-        <Row>
+        {cardSettings?.ownr_nm && (
-          {cardSettings?.ownr_nm && (
+          <Col span={24}>
-            <Col span={24}>
+            <Tooltip title={`${metadata.ownr_ln || ""} ${metadata.ownr_co_nm || ""}`}>
               {cardSettings.compact ? (
                 <div className="ellipses">{`${metadata.ownr_ln || ""} ${metadata.ownr_co_nm || ""}`}</div>
               ) : (
@@ -114,87 +115,113 @@ export default function ProductionBoardCard({ technician, card, bodyshop, cardSe
                   <OwnerNameDisplay ownerObject={card} />
                 </div>
               )}
-            </Col>
+            </Tooltip>
-          )}
+          </Col>
-          {cardSettings?.model_info && (
+        )}
-            <Col span={24}>
+        {cardSettings?.model_info && (
+          <Col span={24}>
+            <Tooltip
+              title={`${metadata.v_model_yr || ""} ${metadata.v_make_desc || ""} ${metadata.v_model_desc || ""}`}
+            >
               <div className="ellipses">{`${metadata.v_model_yr || ""} ${metadata.v_make_desc || ""} ${metadata.v_model_desc || ""}`}</div>
-            </Col>
+            </Tooltip>
-          )}
+          </Col>
-          {cardSettings?.ins_co_nm && metadata.ins_co_nm && (
+        )}
-            <Col span={cardSettings.compact ? 24 : 12}>
+        {cardSettings?.ins_co_nm && metadata.ins_co_nm && (
+          <Col span={cardSettings.compact ? 24 : 12}>
+            <Tooltip title={metadata.ins_co_nm || ""}>
               <div className="ellipses">{metadata.ins_co_nm || ""}</div>
-            </Col>
+            </Tooltip>
-          )}
+          </Col>
-          {cardSettings?.clm_no && metadata.clm_no && (
+        )}
-            <Col span={cardSettings.compact ? 24 : 12}>
+        {cardSettings?.clm_no && metadata.clm_no && (
+          <Col span={cardSettings.compact ? 24 : 12}>
+            <Tooltip title={metadata.clm_no || ""}>
               <div className="ellipses">{metadata.clm_no || ""}</div>
-            </Col>
+            </Tooltip>
-          )}
+          </Col>
-          {cardSettings?.employeeassignments && (
+        )}
-            <Col span={24}>
+        {cardSettings?.employeeassignments && (
-              <Row>
+          <Col span={24}>
-                <Col span={cardSettings.compact ? 24 : 12}>{`B: ${
+            <Row>
-                  employee_body ? `${employee_body.first_name.substr(0, 3)} ${employee_body.last_name.charAt(0)}` : ""
+              <Col span={cardSettings.compact ? 24 : 12}>
-                } ${metadata.labhrs.aggregate.sum.mod_lb_hrs || "?"}h`}</Col>
+                <Tooltip
-                <Col span={cardSettings.compact ? 24 : 12}>{`P: ${
+                  title={`B: ${employee_body ? `${employee_body.first_name.substr(0, 3)} ${employee_body.last_name.charAt(0)}` : ""} ${metadata.labhrs.aggregate.sum.mod_lb_hrs || "?"}h`}
-                  employee_prep ? `${employee_prep.first_name.substr(0, 3)} ${employee_prep.last_name.charAt(0)}` : ""
+                >
-                }`}</Col>
+                  <div className="ellipses">{`B: ${employee_body ? `${employee_body.first_name.substr(0, 3)} ${employee_body.last_name.charAt(0)}` : ""} ${metadata.labhrs.aggregate.sum.mod_lb_hrs || "?"}h`}</div>
-                <Col span={cardSettings.compact ? 24 : 12}>{`R: ${
+                </Tooltip>
-                  employee_refinish
+              </Col>
-                    ? `${employee_refinish.first_name.substr(0, 3)} ${employee_refinish.last_name.charAt(0)}`
+              <Col span={cardSettings.compact ? 24 : 12}>
-                    : ""
+                <Tooltip
-                } ${metadata.larhrs.aggregate.sum.mod_lb_hrs || "?"}h`}</Col>
+                  title={`P: ${employee_prep ? `${employee_prep.first_name.substr(0, 3)} ${employee_prep.last_name.charAt(0)}` : ""}`}
-                <Col span={cardSettings.compact ? 24 : 12}>{`C: ${
+                >
-                  employee_csr ? `${employee_csr.first_name} ${employee_csr.last_name}` : ""
+                  <div className="ellipses">{`P: ${employee_prep ? `${employee_prep.first_name.substring(0, 3)} ${employee_prep.last_name.charAt(0)}` : ""}`}</div>
-                }`}</Col>
+                </Tooltip>
-              </Row>
+              </Col>
-            </Col>
+              <Col span={cardSettings.compact ? 24 : 12}>
-          )}
+                <Tooltip
-          {cardSettings?.actual_in && metadata.actual_in && (
+                  title={`R: ${employee_refinish ? `${employee_refinish.first_name.substring(0, 3)} ${employee_refinish.last_name.charAt(0)}` : ""} ${metadata.larhrs.aggregate.sum.mod_lb_hrs || "?"}h`}
-            <Col span={cardSettings.compact ? 24 : 12}>
+                >
+                  <div className="ellipses">{`R: ${employee_refinish ? `${employee_refinish.first_name.substring(0, 3)} ${employee_refinish.last_name.charAt(0)}` : ""} ${metadata.larhrs.aggregate.sum.mod_lb_hrs || "?"}h`}</div>
+                </Tooltip>
+              </Col>
+              <Col span={cardSettings.compact ? 24 : 12}>
+                <Tooltip title={`C: ${employee_csr ? `${employee_csr.first_name} ${employee_csr.last_name}` : ""}`}>
+                  <div className="ellipses">{`C: ${employee_csr ? `${employee_csr.first_name} ${employee_csr.last_name}` : ""}`}</div>
+                </Tooltip>
+              </Col>
+            </Row>
+          </Col>
+        )}
+        {cardSettings?.actual_in && metadata.actual_in && (
+          <Col span={cardSettings.compact ? 24 : 12}>
+            <Tooltip title={metadata.actual_in}>
               <Space>
                 <DownloadOutlined />
                 <DateTimeFormatter format="MM/DD">{metadata.actual_in}</DateTimeFormatter>
               </Space>
-            </Col>
+            </Tooltip>
-          )}
+          </Col>
-          {cardSettings?.scheduled_completion && metadata.scheduled_completion && (
+        )}
-            <Col span={cardSettings.compact ? 24 : 12}>
+        {cardSettings?.scheduled_completion && metadata.scheduled_completion && (
+          <Col span={cardSettings.compact ? 24 : 12}>
+            <Tooltip title={metadata.scheduled_completion}>
               <Space className={pastDueAlert}>
                 <CalendarOutlined />
                 <DateTimeFormatter format="MM/DD">{metadata.scheduled_completion}</DateTimeFormatter>
               </Space>
-            </Col>
+            </Tooltip>
-          )}
+          </Col>
-          {cardSettings?.ats && metadata.alt_transport && (
+        )}
-            <Col span={12}>
+        {cardSettings?.ats && metadata.alt_transport && (
-              <div>{metadata.alt_transport || ""}</div>
+          <Col span={12}>
-            </Col>
+            <Tooltip title={metadata.alt_transport}>
-          )}
+              <div className="ellipses">{metadata.alt_transport || ""}</div>
-          {cardSettings?.sublets && (
+            </Tooltip>
-            <Col span={12}>
+          </Col>
-              <ProductionSubletsManageComponent subletJobLines={metadata.subletLines} />
+        )}
-            </Col>
+        {cardSettings?.sublets && (
-          )}
+          <Col span={12}>
-          {cardSettings?.production_note && (
+            <ProductionSubletsManageComponent subletJobLines={metadata.subletLines} />
-            <Col span={24}>
+          </Col>
-              <ProductionListColumnProductionNote
+        )}
-                record={{
+        {cardSettings?.production_note && (
-                  production_vars: card?.metadata.production_vars,
+          <Col span={24}>
-                  id: card?.id,
+            <ProductionListColumnProductionNote
-                  refetch: card?.refetch
+              record={{
-                }}
+                production_vars: card?.metadata.production_vars,
-              />
+                id: card?.id,
-            </Col>
+                refetch: card?.refetch
-          )}
+              }}
-          {cardSettings?.partsstatus && (
+            />
-            <Col span={24}>
+          </Col>
-              <JobPartsQueueCount parts={metadata.joblines_status} />
+        )}
-            </Col>
+        {cardSettings?.partsstatus && (
-          )}
+          <Col span={24}>
-        </Row>
+            <JobPartsQueueCount parts={metadata.joblines_status} />
-      )}
+          </Col>
+        )}
+      </Row>
     </Card>
   );
 }

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

@@ -4,8 +4,6 @@ import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { UPDATE_KANBAN_SETTINGS } from "../../graphql/user.queries";
 
-const { TabPane } = Tabs;
-
 export default function ProductionBoardKanbanSettings({ associationSettings, parentLoading }) {
   const [form] = Form.useForm();
   const [open, setOpen] = useState(false);
@@ -14,7 +12,7 @@ export default function ProductionBoardKanbanSettings({ associationSettings, par
   const [updateKbSettings] = useMutation(UPDATE_KANBAN_SETTINGS);
 
   useEffect(() => {
-    form.setFieldsValue(associationSettings && associationSettings.kanban_settings);
+    form.setFieldsValue(associationSettings?.kanban_settings);
   }, [form, associationSettings, open]);
 
   const { t } = useTranslation();
@@ -25,7 +23,7 @@ export default function ProductionBoardKanbanSettings({ associationSettings, par
 
     const result = await updateKbSettings({
       variables: {
-        id: associationSettings && associationSettings.id,
+        id: associationSettings?.id,
         ks: values
       }
     });
@@ -43,7 +41,7 @@ export default function ProductionBoardKanbanSettings({ associationSettings, par
     setHasChanges(false);
   };
 
-  const handleValuesChange = (changedValues, allValues) => {
+  const handleValuesChange = () => {
     setHasChanges(true);
   };
 
@@ -139,80 +137,39 @@ export default function ProductionBoardKanbanSettings({ associationSettings, par
           </Col>
         </Row>
       </Card>
-      {/*<Card title={t("settings.sections.information")} style={cardStyle}>*/}
-      {/*  <Row gutter={[16, 16]}>*/}
-      {/*    <Col span={4}>*/}
-      {/*      <Form.Item name="board_setting_3" valuePropName="checked">*/}
-      {/*        <Checkbox>{t("board.labels.some_setting_3")}</Checkbox>*/}
-      {/*      </Form.Item>*/}
-      {/*    </Col>*/}
-      {/*    <Col span={4}>*/}
-      {/*      <Form.Item name="board_setting_4" valuePropName="checked">*/}
-      {/*        <Checkbox>{t("board.labels.some_setting_4")}</Checkbox>*/}
-      {/*      </Form.Item>*/}
-      {/*    </Col>*/}
-      {/*  </Row>*/}
-      {/*</Card>*/}
-      {/*<Card title={t("settings.sections.beta")} style={cardStyle}>*/}
-      {/*  <Row gutter={[16, 16]}>*/}
-      {/*    <Col span={4}>/!* Add beta settings here if any *!/</Col>*/}
-      {/*  </Row>*/}
-      {/*</Card>*/}
     </>
   );
 
   const renderLaneSettings = () => (
     <>
       <Card title={t("production.settings.layout")} style={cardStyle}>
-        <Row gutter={[16, 16]}>
+        <Row gutter={[16, 16]}></Row>
-          {/*<Col span={4}>*/}
-          {/*  <Form.Item name="lane_setting_1" valuePropName="checked">*/}
-          {/*    <Checkbox>{t("lane.labels.some_setting_1")}</Checkbox>*/}
-          {/*  </Form.Item>*/}
-          {/*</Col>*/}
-          {/*<Col span={4}>*/}
-          {/*  <Form.Item name="lane_setting_2" valuePropName="checked">*/}
-          {/*    <Checkbox>{t("lane.labels.some_setting_2")}</Checkbox>*/}
-          {/*  </Form.Item>*/}
-          {/*</Col>*/}
-        </Row>
       </Card>
-      {/*<Card title={t("settings.sections.information")} style={cardStyle}>*/}
-      {/*  <Row gutter={[16, 16]}>*/}
-      {/*    <Col span={4}>*/}
-      {/*      <Form.Item name="lane_setting_3" valuePropName="checked">*/}
-      {/*        <Checkbox>{t("lane.labels.some_setting_3")}</Checkbox>*/}
-      {/*      </Form.Item>*/}
-      {/*    </Col>*/}
-      {/*    <Col span={4}>*/}
-      {/*      <Form.Item name="lane_setting_4" valuePropName="checked">*/}
-      {/*        <Checkbox>{t("lane.labels.some_setting_4")}</Checkbox>*/}
-      {/*      </Form.Item>*/}
-      {/*    </Col>*/}
-      {/*  </Row>*/}
-      {/*</Card>*/}
-      {/*<Card title={t("settings.sections.beta")} style={cardStyle}>*/}
-      {/*  <Row gutter={[16, 16]}>*/}
-      {/*    <Col span={4}>/!* Add beta settings here if any *!/</Col>*/}
-      {/*  </Row>*/}
-      {/*</Card>*/}
     </>
   );
 
+  const items = [
+    {
+      key: "1",
+      label: t("production.settings.tabs.card"),
+      children: renderCardSettings()
+    },
+    {
+      key: "2",
+      label: t("production.settings.tabs.board"),
+      children: renderBoardSettings()
+    },
+    {
+      key: "3",
+      label: t("production.settings.tabs.lane"),
+      children: renderLaneSettings()
+    }
+  ];
+
   const overlay = (
     <Card>
       <Form form={form} onFinish={handleFinish} layout="vertical" onValuesChange={handleValuesChange}>
-        <Tabs defaultActiveKey="1">
+        <Tabs defaultActiveKey="1" items={items} />
-          <TabPane tab={t("production.settings.tabs.card")} key="1">
-            {renderCardSettings()}
-          </TabPane>
-          <TabPane tab={t("production.settings.tabs.board")} key="2">
-            {renderBoardSettings()}
-          </TabPane>
-          <TabPane tab={t("production.settings.tabs.lane")} key="3">
-            {renderLaneSettings()}
-          </TabPane>
-        </Tabs>
         <Row justify="center" style={{ marginTop: 15 }} gutter={16}>
           <Col span={8}>
             <Button block onClick={() => setOpen(false)}>

client/src/components/production-board-kanban/production-board-kanban.styles.scss

@@ -23,5 +23,3 @@
   background: transparent;
   border: none;
 }
-
-

client/src/components/production-board-kanban/production-board-kanban.utils.js

@@ -1,5 +1,5 @@
 import { groupBy } from "lodash";
-import fakeData from "./testData/board1200.json";
+import fakeData from "./testData/board300.json";
 
 const sortByParentId = (arr) => {
   // return arr.reduce((accumulator, currentValue) => {

client/src/components/trello-board/components/Lane/SizeMemoryWrapper.jsx

@@ -0,0 +1,52 @@
+import React, { useEffect, useRef } from "react";
+import PropTypes from "prop-types";
+
+const SizeMemoryWrapper = ({ children, maxHeight, setMaxHeight, maxWidth, setMaxWidth }) => {
+  const ref = useRef(null);
+
+  useEffect(() => {
+    const currentRef = ref.current; // Capture the current ref value
+
+    const updateSize = () => {
+      // Check if the zoom level is less than 100%
+      if (window.devicePixelRatio < 1) {
+        return; // Do not update width and height
+      }
+
+      const currentHeight = currentRef?.firstChild?.clientHeight || 0;
+      const currentWidth = currentRef?.firstChild?.clientWidth || 0;
+      // Update height as before
+      setMaxHeight((prevHeight) => Math.max(prevHeight, currentHeight));
+      // Update width to decrease when zooming back in
+      setMaxWidth((prevWidth) => Math.max(prevWidth, currentWidth)); // Increase width if current is greater than previous
+    };
+
+    const resizeObserver = new ResizeObserver(updateSize);
+
+    if (currentRef?.firstChild) {
+      resizeObserver.observe(currentRef.firstChild);
+    }
+
+    return () => {
+      if (currentRef?.firstChild) {
+        resizeObserver.unobserve(currentRef.firstChild);
+      }
+    };
+  }, [setMaxHeight, setMaxWidth]);
+
+  return (
+    <div ref={ref} className="size-memory-wrapper" style={{ minHeight: maxHeight, minWidth: maxWidth }}>
+      {children}
+    </div>
+  );
+};
+
+SizeMemoryWrapper.propTypes = {
+  children: PropTypes.node.isRequired,
+  maxHeight: PropTypes.number.isRequired,
+  setMaxHeight: PropTypes.func.isRequired,
+  maxWidth: PropTypes.number.isRequired,
+  setMaxWidth: PropTypes.func.isRequired
+};
+
+export default SizeMemoryWrapper;

client/src/components/trello-board/controllers/BoardContainer.jsx

@@ -37,6 +37,8 @@ const BoardContainer = ({
   const [isDragging, setIsDragging] = useState(false);
   const [isProcessing, setIsProcessing] = useState(false);
   const [maxLaneHeight, setMaxLaneHeight] = useState(0);
+  const [maxCardHeight, setMaxCardHeight] = useState(0);
+  const [maxCardWidth, setMaxCardWidth] = useState(0);
 
   const dispatch = useDispatch();
   const currentReducerData = useSelector((state) => (state.trello.lanes ? state.trello : {}));
@@ -151,6 +153,10 @@ const BoardContainer = ({
                 cardSettings={cardSettings}
                 maxLaneHeight={maxLaneHeight}
                 setMaxLaneHeight={setMaxLaneHeight}
+                maxCardHeight={maxCardHeight}
+                setMaxCardHeight={setMaxCardHeight}
+                maxCardWidth={maxCardWidth}
+                setMaxCardWidth={setMaxCardWidth}
               />
             );
           })}

client/src/components/trello-board/controllers/Lane.jsx

@@ -14,6 +14,7 @@ import { selectBodyshop } from "../../../redux/user/user.selectors.js";
 import { selectTechnician } from "../../../redux/tech/tech.selectors.js";
 import ProductionBoardCard from "../../production-board-kanban-card/production-board-kanban-card.component.jsx";
 import HeightMemoryWrapper from "../components/Lane/HeightMemoryWrapper.jsx";
+import SizeMemoryWrapper from "../components/Lane/SizeMemoryWrapper.jsx";
 
 /**
  * Lane is a React component that represents a lane in a Trello-like board.
@@ -27,6 +28,10 @@ import HeightMemoryWrapper from "../components/Lane/HeightMemoryWrapper.jsx";
  * @param orientation
  * @param maxLaneHeight
  * @param setMaxLaneHeight
+ * @param maxCardHeight
+ * @param setMaxCardHeight
+ * @param maxCardWidth
+ * @param setMaxCardWidth
  * @param technician -- connected to redux
  * @param bodyshop -- connected to redux
  * @returns {Element}
@@ -43,6 +48,10 @@ const Lane = ({
   orientation = "vertical",
   maxLaneHeight,
   setMaxLaneHeight,
+  maxCardHeight,
+  setMaxCardHeight,
+  maxCardWidth,
+  setMaxCardWidth,
   technician,
   bodyshop
 }) => {
@@ -82,21 +91,28 @@ const Lane = ({
               className={`item ${snapshot.isDragging ? "is-dragging" : ""}`}
               key={card.id}
             >
-              <ProductionBoardCard
+              <SizeMemoryWrapper
-                technician={technician}
+                maxHeight={maxCardHeight}
-                bodyshop={bodyshop}
+                setMaxHeight={setMaxCardHeight}
-                cardSettings={cardSettings}
+                maxWidth={maxCardWidth}
-                key={card.id}
+                setMaxWidth={setMaxCardWidth}
-                style={card.style}
+              >
-                card={card}
+                <ProductionBoardCard
-                className="react-trello-card"
+                  technician={technician}
-              />
+                  bodyshop={bodyshop}
+                  cardSettings={cardSettings}
+                  key={card.id}
+                  card={card}
+                  style={{ minHeight: maxCardHeight, minWidth: maxCardWidth }}
+                  className="react-trello-card"
+                />
+              </SizeMemoryWrapper>
             </div>
           )}
         </Draggable>
       );
     },
-    [isProcessing, technician, bodyshop, cardSettings]
+    [isProcessing, technician, bodyshop, cardSettings, maxCardHeight, setMaxCardHeight, maxCardWidth, setMaxCardWidth]
   );
 
   const ItemWrapper = useCallback(
@@ -127,7 +143,11 @@ const Lane = ({
               {children}
             </div>
           )),
-          Item: ({ children, ...props }) => <div {...props}>{children}</div>
+          Item: ({ children, ...props }) => (
+            <div style={{ minWidth: maxCardWidth, minHeight: maxCardHeight }} {...props}>
+              {children}
+            </div>
+          )
         },
         itemContent: (index, item) => <ItemWrapper>{renderDraggable(index, item)}</ItemWrapper>,
         overscan: { main: 10, reverse: 10 }
@@ -140,16 +160,18 @@ const Lane = ({
         itemContent: (index, item) => renderDraggable(index, item),
         scrollerRef: provided.innerRef,
         style: {
+          minWidth: maxCardWidth,
           minHeight: maxLaneHeight
         }
       };
 
       const componentProps = orientation === "vertical" ? verticalProps : horizontalProps;
+
       const finalComponentProps = collapsed
         ? orientation === "horizontal"
           ? {
               style: {
-                height: orientation === "vertical" ? 10 : maxLaneHeight
+                height: maxLaneHeight
               }
             }
           : {}
@@ -174,11 +196,11 @@ const Lane = ({
           style={{ ...provided.droppableProps.style }}
         >
           {isVisible && <FinalComponent {...finalComponentProps} />}
-          {provided.placeholder}
+          {(collapsed || renderedCards.length === 0) && provided.placeholder}
         </div>
       );
     },
-    [orientation, collapsed, isVisible, renderDraggable, maxLaneHeight, setMaxLaneHeight]
+    [orientation, collapsed, isVisible, renderDraggable, maxLaneHeight, setMaxLaneHeight, maxCardHeight, maxCardWidth]
   );
 
   const renderDragContainer = useCallback(
@@ -196,20 +218,35 @@ const Lane = ({
               {...provided.draggableProps}
               {...provided.dragHandleProps}
               ref={provided.innerRef}
-              style={provided.draggableProps.style}
+              style={{
-              className={`item ${snapshot.isDragging ? "is-dragging" : ""}`}
+                ...provided.draggableProps.style,
+                minHeight: maxCardHeight,
+                minWidth: maxCardWidth
+              }}
+              className={`clone ${snapshot.isDragging ? "is-dragging" : ""}`}
               key={card.id}
             >
+              {/*<SizeMemoryWrapper*/}
+              {/*  maxHeight={maxCardHeight}*/}
+              {/*  setMaxHeight={setMaxCardHeight}*/}
+              {/*  maxWidth={maxCardWidth}*/}
+              {/*  setMaxWidth={setMaxCardWidth}*/}
+              {/*>*/}
               <ProductionBoardCard
                 technician={technician}
                 bodyshop={bodyshop}
                 cardSettings={cardSettings}
                 key={card.id}
-                style={card.style}
                 className="react-trello-card"
+                style={{
+                  minHeight: maxCardHeight,
+                  minWidth: maxCardWidth,
+                  background_color: "red !important"
+                }}
                 card={card}
                 clone={false}
               />
+              {/*</SizeMemoryWrapper>*/}
             </div>
           );
         }}
@@ -217,7 +254,18 @@ const Lane = ({
         {(provided) => renderDroppable(provided, sortedCards)}
       </Droppable>
     ),
-    [id, index, orientation, renderDroppable, sortedCards, technician, bodyshop, cardSettings]
+    [
+      id,
+      index,
+      orientation,
+      renderDroppable,
+      sortedCards,
+      technician,
+      bodyshop,
+      cardSettings,
+      maxCardHeight,
+      maxCardWidth
+    ]
   );
 
   return (
@@ -241,7 +289,11 @@ Lane.propTypes = {
   isProcessing: PropTypes.bool.isRequired,
   cardSettings: PropTypes.object.isRequired,
   maxLaneHeight: PropTypes.number.isRequired,
-  setMaxLaneHeight: PropTypes.func.isRequired
+  setMaxLaneHeight: PropTypes.func.isRequired,
+  maxCardHeight: PropTypes.number.isRequired,
+  setMaxCardHeight: PropTypes.func.isRequired,
+  maxCardWidth: PropTypes.number.isRequired,
+  setMaxCardWidth: PropTypes.func.isRequired
 };
 
 const mapDispatchToProps = (dispatch) => ({

client/src/components/trello-board/styles/Base.js

@@ -20,7 +20,7 @@ const getSectionStyles = (props) => {
       display: inline-flex;
       flex-direction: column;
       // overflow-y: none;      
-      min-width: 8.5%;
+      min-width: 8%;
     `;
   }
   return `
@@ -61,7 +61,6 @@ export const StyleHorizontal = styled.div`
     display: flex;
     flex: 1 1 auto;
     white-space: nowrap;
-    min-width: 4%;
   }
 
   .react-trello-column-header {
@@ -77,6 +76,16 @@ export const StyleHorizontal = styled.div`
     height: auto;
     margin: 2px;
   }
+
+  .size-memory-wrapper {
+    display: flex; /* This makes it a flex container */
+    flex-direction: column; /* Aligns children vertically */
+  }
+
+  .size-memory-wrapper .ant-card {
+    flex-grow: 1; /* Allows the card to expand to fill the available space */
+    width: 100%; /* Ensures the card stretches to fill the width of its parent */
+  }
 `;
 
 export const StyleVertical = styled.div`
@@ -112,19 +121,13 @@ export const StyleVertical = styled.div`
 
   .grid-item {
     display: flex;
-    width: 250px; // TODO: (Note) This is where we will set the width of the cards in the vertical orientation
+    width: 150px; // TODO: (Note) This is where we will set the width of the cards in the vertical orientation
     align-content: stretch;
     box-sizing: border-box;
   }
 
-  .item {
-    height: 100%;
-    width: 250px; // TODO: (Note) This is where we will set the width of the cards in the vertical orientation
-  }
-
   .item-wrapper {
     width: 100%;
-    height: 100%;
   }
 
   .react-trello-board {
@@ -133,9 +136,17 @@ export const StyleVertical = styled.div`
 
   .ant-card-body {
   }
+  .size-memory-wrapper {
+    display: flex; /* This makes it a flex container */
+    flex-direction: column; /* Aligns children vertically */
+  }
 
-  .ant-card {
+  .size-memory-wrapper .ant-card {
-    height: 100%;
+    flex-grow: 1; /* Allows the card to expand to fill the available space */
+    width: 100%; /* Ensures the card stretches to fill the width of its parent */
+  }
+  .react-trello-lane .lane-collapsed {
+    min-height: 5px;
   }
 `;
 

client/src/translations/en_us/common.json

@@ -2749,6 +2749,7 @@
 				"settings": "Error saving board settings: {{error}}"
 			},
 			"labels": {
+        "model_info": "Model Info",
 				"actual_in": "Actual In",
 				"alert": "Alert",
 				"alertoff": "Remove alert from Job",

client/src/translations/es/common.json

@@ -2739,7 +2739,8 @@
 				"settings": ""
 			},
 			"labels": {
-				"actual_in": "",
+        "model_info": "",
+        "actual_in": "",
 				"alert": "",
 				"alertoff": "",
 				"alerton": "",

client/src/translations/fr/common.json

@@ -2739,7 +2739,8 @@
 				"settings": ""
 			},
 			"labels": {
-				"actual_in": "",
+        "model_info": "",
+        "actual_in": "",
 				"alert": "",
 				"alertoff": "",
 				"alerton": "",