Restricted the component resizing within the parent

frontend/src/Editor/Container.jsx

@@ -816,6 +816,7 @@ export const Container = ({
         setDraggedSubContainer={setDraggedSubContainer}
         draggedSubContainer={draggedSubContainer}
         mode={isVersionReleased ? 'view' : mode}
+        boxesAsObj={boxes}
       />
       {Object.keys(boxes).length === 0 && !appLoading && !isDragging && (
         <div style={{ paddingTop: '10%' }}>

frontend/src/Editor/DragContainer.jsx

@@ -9,8 +9,6 @@ import { flushSync } from 'react-dom';
 import { restrictedWidgetsObj } from './WidgetManager/restrictedWidgetsConfig';
 import { useGridStoreActions, useDragTarget, useNoOfGrid, useGridStore } from '@/_stores/gridStore';
 
-const NO_OF_GRIDS = 43;
-
 const DimensionViewable = {
   name: 'dimensionViewable',
   props: [],
@@ -110,6 +108,7 @@ export default function DragContainer({
   autoComputeLayout,
   setDraggedSubContainer,
   draggedSubContainer,
+  boxesAsObj,
 }) {
   const [dragTarget, setDragTarget] = useDragTarget();
   const [draggedTarget, setDraggedTarget] = useState();
@@ -276,6 +275,41 @@ export default function DragContainer({
       : '.widget-target'
   );
 
+  // Function to limit the resizing of element within the parent
+  const setResizingLimit = (e, i) => {
+    const elemLayout = boxesAsObj[e.target.id]?.layouts[currentLayout];
+    const parentLayout = boxesAsObj[i.parent]?.layouts[currentLayout];
+    let maxWidth = null,
+      maxHeight = null,
+      parentgW = subContainerWidths[i.parent] || gridWidth,
+      elemSize = 0;
+
+    const [leftRight, topBottom] = e.direction;
+    if (leftRight === 0) {
+      if (topBottom === -1) {
+        //Resize with top handle
+        elemSize = elemLayout?.top + elemLayout?.height;
+      } else {
+        //Resize with top handle
+        const parentHeight = document.getElementById(`canvas-${i.parent}`)?.offsetHeight ?? parentLayout?.height;
+        elemSize = parentHeight - elemLayout?.top;
+      }
+      maxHeight = elemSize;
+    } else {
+      if (leftRight === -1) {
+        //Resize with left handle
+        elemSize = (noOfGrids - (elemLayout?.left + elemLayout?.width)) * parentgW;
+      } else {
+        //Resize with right handle
+        elemSize = elemLayout?.left * parentgW;
+      }
+      maxWidth = noOfGrids * parentgW - elemSize;
+    }
+
+    e.setMax([maxWidth, maxHeight]);
+    e.setMin([gridWidth, 10]);
+  };
+
   return (
     <div className="root">
       <div className="container-fluid rm-container p-0">
@@ -851,7 +885,7 @@ export default function DragContainer({
                     onResizeStart={(e) => {
                       setResizingComponentId(e.target.id);
                       setActiveGrid(i.parent);
-                      e.setMin([gridWidth, 10]);
+                      setResizingLimit(e, i);
                       if (currentLayout === 'mobile' && autoComputeLayout) {
                         turnOffAutoLayout();
                         return false;

frontend/src/Editor/SubContainer.jsx

@@ -20,6 +20,7 @@ import { useEditorStore } from '@/_stores/editorStore';
 import { diff } from 'deep-object-diff';
 import DragContainerNested from './DragContainerNested';
 import { useGridStore, useDragTarget } from '@/_stores/gridStore';
+import { SUBCONTAINER_WITH_SCROLL } from './constants';
 
 // const NO_OF_GRIDS = 43;
 
@@ -139,11 +140,7 @@ export const SubContainer = ({
 
   useEffect(() => {
     try {
-      const isParentModal =
-        (allComponents[parent]?.component?.component === 'Modal' ||
-          allComponents[parent]?.component?.component === 'Form' ||
-          allComponents[parent]?.component?.component === 'Container') ??
-        false;
+      const isParentScrollable = SUBCONTAINER_WITH_SCROLL.has(allComponents[parent]?.component?.component);
       const canvasBounds = parentRef.current.getBoundingClientRect();
       const subContainerHeight = canvasBounds.height - 30;
       const componentBottom = Object.values(childWidgets).reduce(function (max, currentElement) {
@@ -151,10 +148,8 @@ export const SubContainer = ({
         return Math.max(max, currentSum);
       }, 0);
 
-      if (isParentModal && subContainerHeight <= componentBottom) {
+      if (isParentScrollable && subContainerHeight <= componentBottom) {
         subContainerHeightRef.current = componentBottom + 100;
-      } else {
-        subContainerHeightRef.current = subContainerHeight + 28;
       }
     } catch (error) {
       console.error('console.error', error);

frontend/src/Editor/constants.js

@@ -0,0 +1 @@
+export const SUBCONTAINER_WITH_SCROLL = new Set(['Modal', 'Form', 'Container']);