diff --git a/client/src/components/production-board-kanban/production-board-kanban.component.jsx b/client/src/components/production-board-kanban/production-board-kanban.component.jsx
index 345936ba1..c2906d018 100644
--- a/client/src/components/production-board-kanban/production-board-kanban.component.jsx
+++ b/client/src/components/production-board-kanban/production-board-kanban.component.jsx
@@ -149,8 +149,6 @@ function ProductionBoardKanbanComponent({ data, bodyshop, refetch, insertAuditTr
           )
         });
 
-        // TODO (Note): This is causing the subscription to fire
-
         insertAuditTrail({
           jobid: draggableId,
           operation: AuditTrailMapping.jobstatuschange(targetLane.id),
@@ -259,7 +257,9 @@ function ProductionBoardKanbanComponent({ data, bodyshop, refetch, insertAuditTr
         }
       />
       {cardSettings.cardcolor && <CardColorLegend cardSettings={cardSettings} bodyshop={bodyshop} />}
+
       <ProductionListDetailComponent jobs={data} />
+
       <Board data={boardLanes} onDragEnd={onDragEnd} orientation={orientation} cardSettings={cardSettings} />
     </div>
   );
diff --git a/client/src/components/production-board-kanban/trello-board/components/HeightMemoryWrapper.jsx b/client/src/components/production-board-kanban/trello-board/components/HeightMemoryWrapper.jsx
index af8544906..364979aa0 100644
--- a/client/src/components/production-board-kanban/trello-board/components/HeightMemoryWrapper.jsx
+++ b/client/src/components/production-board-kanban/trello-board/components/HeightMemoryWrapper.jsx
@@ -14,6 +14,7 @@ const HeightMemoryWrapper = ({ children, maxHeight, setMaxHeight, override, item
   const ref = useRef(null);
   const heightMapRef = useRef(new Map());
   const [localMaxHeight, setLocalMaxHeight] = useState(maxHeight);
+  const [devicePixelRatio, setDevicePixelRatio] = useState(window.devicePixelRatio);
 
   useEffect(() => {
     const currentRef = ref.current;
@@ -31,16 +32,30 @@ const HeightMemoryWrapper = ({ children, maxHeight, setMaxHeight, override, item
     };
 
     const resizeObserver = new ResizeObserver(updateHeight);
+
     if (currentRef?.firstChild) {
       resizeObserver.observe(currentRef.firstChild);
     }
 
+    const resizeHandler = () => {
+      if (Math.abs(window.devicePixelRatio - devicePixelRatio) > 0.1) {
+        // Threshold to detect significant zoom level change
+        heightMapRef.current.clear(); // Clearing the height memory as zoom level has changed significantly
+        setLocalMaxHeight(0); // Reset local max height
+        setDevicePixelRatio(window.devicePixelRatio); // Update the recorded device pixel ratio
+      }
+      updateHeight();
+    };
+
+    window.addEventListener("resize", resizeHandler);
+
     return () => {
       if (currentRef?.firstChild) {
         resizeObserver.unobserve(currentRef.firstChild);
       }
+      window.removeEventListener("resize", resizeHandler);
     };
-  }, [itemKey, setMaxHeight]);
+  }, [itemKey, setMaxHeight, devicePixelRatio]);
 
   useEffect(() => {
     if (itemKey && heightMapRef.current.has(itemKey)) {