- Fix bug where in vertical Mode, the lanes would be as large as the largest lane.

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

client/src/components/production-board-kanban/trello-board/components/Lane/HeightMemoryWrapper.jsx

@@ -1,40 +1,56 @@
-import React, { useEffect, useRef } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import PropTypes from "prop-types";
 
+const heightMap = new Map();
+
 /**
  * Height Memory Wrapper
  * @param children
  * @param maxHeight
  * @param setMaxHeight
  * @param override - Override the minHeight style from being set
+ * @param key - Unique key to preserve height for items with the same key
  * @returns {Element}
  * @constructor
  */
-const HeightMemoryWrapper = ({ children, maxHeight, setMaxHeight, override }) => {
+const HeightMemoryWrapper = ({ children, maxHeight, setMaxHeight, override, itemKey }) => {
   const ref = useRef(null);
+  const [localMaxHeight, setLocalMaxHeight] = useState(maxHeight);
 
   useEffect(() => {
     const currentRef = ref.current; // Step 1: Capture the current ref value
     const updateHeight = () => {
       const currentHeight = currentRef?.firstChild?.clientHeight || 0;
+      if (itemKey) {
+        const keyHeight = heightMap.get(itemKey) || 0;
+        const newHeight = Math.max(keyHeight, currentHeight);
+        heightMap.set(itemKey, newHeight);
+        setLocalMaxHeight(newHeight);
+      } else {
+        setLocalMaxHeight((prevHeight) => Math.max(prevHeight, currentHeight));
+      }
       setMaxHeight((prevHeight) => Math.max(prevHeight, currentHeight));
     };
 
     const resizeObserver = new ResizeObserver(updateHeight);
     if (currentRef?.firstChild) {
-      // Step 2: Use the captured ref for observing
       resizeObserver.observe(currentRef.firstChild);
     }
 
     return () => {
       if (currentRef?.firstChild) {
-        // Step 2: Use the captured ref for observing
         resizeObserver.unobserve(currentRef.firstChild);
       }
     };
-  }, [setMaxHeight]);
+  }, [itemKey, setMaxHeight]);
 
-  const style = override ? {} : { minHeight: maxHeight };
+  useEffect(() => {
+    if (itemKey && heightMap.has(itemKey)) {
+      setLocalMaxHeight(heightMap.get(itemKey));
+    }
+  }, [itemKey]);
+
+  const style = override ? {} : { minHeight: localMaxHeight };
 
   return (
     <div ref={ref} style={style}>
@@ -47,7 +63,8 @@ HeightMemoryWrapper.propTypes = {
   children: PropTypes.node.isRequired,
   maxHeight: PropTypes.number.isRequired,
   setMaxHeight: PropTypes.func.isRequired,
-  override: PropTypes.bool
+  override: PropTypes.bool,
+  itemKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
 };
 
 export default HeightMemoryWrapper;

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

@@ -183,8 +183,20 @@ const Lane = ({
       const shouldOverride = orientation !== "horizontal" && (collapsed || !renderedCards.length);
       const shouldRenderPlaceholder = orientation !== "horizontal" && (collapsed || renderedCards.length === 0);
 
+      const hasKey =
+        orientation === "vertical"
+          ? {
+              key: id
+            }
+          : {};
+
       return (
-        <HeightMemoryWrapper maxHeight={maxLaneHeight} setMaxHeight={setMaxLaneHeight} override={shouldOverride}>
+        <HeightMemoryWrapper
+          {...hasKey}
+          maxHeight={maxLaneHeight}
+          setMaxHeight={setMaxLaneHeight}
+          override={shouldOverride}
+        >
           <div
             {...provided.droppableProps}
             ref={provided.innerRef}
@@ -197,7 +209,7 @@ const Lane = ({
         </HeightMemoryWrapper>
       );
     },
-    [orientation, collapsed, isVisible, renderDraggable, maxLaneHeight, setMaxLaneHeight, maxCardWidth]
+    [orientation, collapsed, isVisible, renderDraggable, maxLaneHeight, setMaxLaneHeight, maxCardWidth, id]
   );
 
   const renderDragContainer = useCallback(