From 8b3f2a4c68dea869b8173f5ae2d54397717e42fe Mon Sep 17 00:00:00 2001
From: Johnson Cherian <johnsonc.dev@gmail.com>
Date: Tue, 24 Oct 2023 09:33:09 +0530
Subject: [PATCH] feat: added gridutils funcs

---
 frontend/src/Editor/Container.jsx     | 9 +++++++++
 frontend/src/Editor/DragContainer.jsx | 3 ++-
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/frontend/src/Editor/Container.jsx b/frontend/src/Editor/Container.jsx
index 26a0f242f3..eb9bb71e51 100644
--- a/frontend/src/Editor/Container.jsx
+++ b/frontend/src/Editor/Container.jsx
@@ -23,6 +23,7 @@ import _ from 'lodash';
 // eslint-disable-next-line import/no-unresolved
 import { diff } from 'deep-object-diff';
 import DragContainer from './DragContainer';
+import { correctBounds } from './gridUtils';
 
 const NO_OF_GRIDS = 24;
 
@@ -93,6 +94,13 @@ export const Container = ({
   const [isContainerFocused, setContainerFocus] = useState(false);
   const [canvasHeight, setCanvasHeight] = useState(null);
 
+  useEffect(() => {
+    if (currentLayout === 'mobile') {
+      const mobLayouts = boxes.map((box) => box?.layout?.mobile);
+      correctBounds(mobLayouts, { cols: 6 });
+    }
+  }, [currentLayout]);
+
   const router = useRouter();
   const canvasRef = useRef(null);
   const focusedParentIdRef = useRef(undefined);
@@ -801,6 +809,7 @@ export const Container = ({
         gridWidth={gridWidth}
         selectedComponents={selectedComponents}
         setIsDragging={setIsDragging}
+        currentLayout
       />
       {/* {Object.keys(boxes).map((key) => {
         const box = boxes[key];
diff --git a/frontend/src/Editor/DragContainer.jsx b/frontend/src/Editor/DragContainer.jsx
index c211c678c4..ddd0cdb012 100644
--- a/frontend/src/Editor/DragContainer.jsx
+++ b/frontend/src/Editor/DragContainer.jsx
@@ -16,6 +16,7 @@ export default function DragContainer({
   gridWidth,
   selectedComponents = [],
   setIsDragging,
+  currentLayout,
 }) {
   const [dragTarget, setDragTarget] = useState();
   const [draggedTarget, setDraggedTarget] = useState();
@@ -36,7 +37,7 @@ export default function DragContainer({
   useEffect(() => {
     moveableRef.current.updateRect();
     setTimeout(() => moveableRef.current.updateRect(), 100);
-  }, [selectedComponents.length, JSON.stringify(boxes)]);
+  }, [selectedComponents.length, JSON.stringify(boxes), currentLayout]);
 
   useEffect(() => {
     setList(boxList);