🐛 Fix issue with edit mode resizing

src/components/Dashboard/Wrappers/gridstack/init-gridstack.ts

@@ -1,5 +1,5 @@
 import { GridItemHTMLElement, GridStack, GridStackNode } from 'fily-publish-gridstack';
-import { MutableRefObject, RefObject } from 'react';
+import { MutableRefObject, RefObject, useEffect } from 'react';
 import { AppType } from '../../../../types/app';
 import { ShapeType } from '../../../../types/shape';
 import { IWidget } from '../../../../widgets/widgets';
@@ -45,7 +45,7 @@ export const initializeGridstack = (
   );
   const grid = newGrid.current;
   // Must be used to update the column count after the initialization
-  grid.column(columnCount);
+  grid.column(columnCount, 'none');
 
   // Add listener for moving items around in a wrapper
   grid.on('change', (_, el) => {

src/components/Dashboard/Wrappers/gridstack/store.tsx

@@ -1,6 +1,5 @@
 import { useMantineTheme } from '@mantine/core';
 import create from 'zustand';
-import { useConfigContext } from '../../../../config/provider';
 
 export const useGridstackStore = create<GridstackStoreType>((set, get) => ({
   mainAreaWidth: null,

src/components/Dashboard/Wrappers/gridstack/use-gridstack.ts

@@ -232,6 +232,11 @@ export const useGridstack = (
 
   // initialize the gridstack
   useEffect(() => {
+    const removeEventHandlers = () => {
+      gridRef.current?.off('change');
+      gridRef.current?.off('added');
+    };
+
     const tilesWithUnknownLocation: TileWithUnknownLocation[] = [];
     initializeGridstack(
       areaType,
@@ -250,7 +255,7 @@ export const useGridstack = (
         onAdd,
       }
     );
-    if (!configName) return;
+    if (!configName) return removeEventHandlers;
     updateConfig(configName, (prev) => ({
       ...prev,
       apps: prev.apps.map((app) => {
@@ -300,6 +305,7 @@ export const useGridstack = (
         };
       }),
     }));
+    return removeEventHandlers;
   }, [items, wrapperRef.current, widgets, wrapperColumnCount]);
 
   return {