From 97c34941ab8276221685ca37db8f01bb37418f89 Mon Sep 17 00:00:00 2001
From: Johnson Cherian <johnsonc.dev@gmail.com>
Date: Thu, 11 Jan 2024 10:35:10 +0530
Subject: [PATCH] fix: updated calc for 43 grid system in mobile

---
 frontend/src/Editor/Container.jsx | 38 +++++++++++++++----------------
 frontend/src/Editor/gridUtils.js  |  4 +++-
 2 files changed, 22 insertions(+), 20 deletions(-)

diff --git a/frontend/src/Editor/Container.jsx b/frontend/src/Editor/Container.jsx
index 3db024b275..0761a4ef27 100644
--- a/frontend/src/Editor/Container.jsx
+++ b/frontend/src/Editor/Container.jsx
@@ -106,25 +106,25 @@ export const Container = ({
   const [canvasHeight, setCanvasHeight] = useState(null);
 
   useEffect(() => {
-    // if (currentLayout === 'mobile' && appDefinition.pages[currentPageId]?.autoComputeLayout) {
-    //   const mobLayouts = Object.keys(boxes).map((key) => {
-    //     return { ...cloneDeep(boxes[key]?.layouts?.desktop), i: key };
-    //   });
-    //   const updatedBoxes = cloneDeep(boxes);
-    //   let newmMobLayouts = correctBounds(mobLayouts, { cols: 12 });
-    //   newmMobLayouts = compact(newmMobLayouts, 'vertical', 12);
-    //   Object.keys(boxes).forEach((id) => {
-    //     const mobLayout = newmMobLayouts.find((layout) => layout.i === id);
-    //     updatedBoxes[id].layouts.mobile = {
-    //       left: mobLayout.left,
-    //       height: mobLayout.height,
-    //       top: mobLayout.top,
-    //       width: mobLayout.width,
-    //     };
-    //   });
-    //   setBoxes({ ...updatedBoxes });
-    //   // console.log('currentLayout', data);
-    // }
+    if (currentLayout === 'mobile' && appDefinition.pages[currentPageId]?.autoComputeLayout) {
+      const mobLayouts = Object.keys(boxes).map((key) => {
+        return { ...cloneDeep(boxes[key]?.layouts?.desktop), i: key };
+      });
+      const updatedBoxes = cloneDeep(boxes);
+      let newmMobLayouts = correctBounds(mobLayouts, { cols: 43 });
+      newmMobLayouts = compact(newmMobLayouts, 'vertical', 43);
+      Object.keys(boxes).forEach((id) => {
+        const mobLayout = newmMobLayouts.find((layout) => layout.i === id);
+        updatedBoxes[id].layouts.mobile = {
+          left: mobLayout.left,
+          height: mobLayout.height,
+          top: mobLayout.top,
+          width: mobLayout.width,
+        };
+      });
+      setBoxes({ ...updatedBoxes });
+      // console.log('currentLayout', data);
+    }
     // setNoOfGrids(currentLayout === 'mobile' ? 12 : 43);
   }, [currentLayout]);
 
diff --git a/frontend/src/Editor/gridUtils.js b/frontend/src/Editor/gridUtils.js
index bfdf2a2a8c..89666de401 100644
--- a/frontend/src/Editor/gridUtils.js
+++ b/frontend/src/Editor/gridUtils.js
@@ -228,6 +228,8 @@ function sortLayoutItemsByRowCol(layout) {
 function scaleLayouts(layouts, cols = 6) {
   return layouts.map((layout) => ({
     ...layout,
-    width: layout.width <= 4 ? 2 : layout.width <= 8 ? 3 : layout.width,
+    // width: layout.width <= 4 ? 2 : layout.width <= 8 ? 3 : layout.width,
+    // width: layout.width <= 10 ? 10 : layout.width <= 20 ? 24 : 43,
+    width: layout.width * 3 > 43 ? 43 : layout.width * 3,
   }));
 }