From 709ab6250289c17fa100cf25a289c7b3c967bd52 Mon Sep 17 00:00:00 2001
From: Nakul Nagargade <nakul@tooljet.com>
Date: Wed, 2 Jul 2025 12:23:49 +0530
Subject: [PATCH 1/4] Fix header resizer not coming up on Container, form and
 modal

---
 frontend/src/AppBuilder/Widgets/Container/Container.jsx  | 6 +-----
 .../Widgets/Form/Components/HorizontalSlot.jsx           | 6 +++++-
 frontend/src/AppBuilder/Widgets/Form/Form.jsx            | 9 +--------
 .../src/AppBuilder/Widgets/ModalV2/Components/Footer.jsx | 2 --
 .../src/AppBuilder/Widgets/ModalV2/Components/Header.jsx | 2 --
 .../src/AppBuilder/Widgets/ModalV2/Components/Modal.jsx  | 5 +----
 frontend/src/AppBuilder/_hooks/useActiveSlot.js          | 1 -
 7 files changed, 8 insertions(+), 23 deletions(-)

diff --git a/frontend/src/AppBuilder/Widgets/Container/Container.jsx b/frontend/src/AppBuilder/Widgets/Container/Container.jsx
index 61775f5919..de09b4fed0 100644
--- a/frontend/src/AppBuilder/Widgets/Container/Container.jsx
+++ b/frontend/src/AppBuilder/Widgets/Container/Container.jsx
@@ -33,7 +33,6 @@ export const Container = ({
     setExposedVariables,
     setExposedVariable
   );
-
   const { dynamicHeight } = properties;
 
   useDynamicHeight({
@@ -51,10 +50,8 @@ export const Container = ({
     shallow
   );
 
-  const isEditing = useStore((state) => state.currentMode === 'edit');
   const setComponentProperty = useStore((state) => state.setComponentProperty, shallow);
-
-  const activeSlot = useActiveSlot(isEditing ? id : null); // Track the active slot for this widget
+  const activeSlot = useActiveSlot(id); // Track the active slot for this widget
   const { borderRadius, borderColor, boxShadow } = styles;
   const { headerHeight = 80 } = properties;
   const headerMaxHeight = parseInt(height, 10) - 100 - 10;
@@ -118,7 +115,6 @@ export const Container = ({
             <HorizontalSlot
               slotName={'header'}
               slotStyle={containerHeaderStyles}
-              isEditing={isEditing}
               id={`${id}-header`}
               height={headerHeight}
               width={width}
diff --git a/frontend/src/AppBuilder/Widgets/Form/Components/HorizontalSlot.jsx b/frontend/src/AppBuilder/Widgets/Form/Components/HorizontalSlot.jsx
index 7e73239e96..f7a130a98b 100644
--- a/frontend/src/AppBuilder/Widgets/Form/Components/HorizontalSlot.jsx
+++ b/frontend/src/AppBuilder/Widgets/Form/Components/HorizontalSlot.jsx
@@ -2,6 +2,9 @@ import React, { useEffect } from 'react';
 import { Container as SubContainer } from '@/AppBuilder/AppCanvas/Container';
 import { showGridLines, hideGridLines } from '@/AppBuilder/AppCanvas/Grid/gridUtils';
 import { useSubContainerResizable } from '@/AppBuilder/_hooks/useSubContainerResizable';
+import { useModuleContext } from '@/AppBuilder/_contexts/ModuleContext';
+import useStore from '@/AppBuilder/_stores/store';
+import { shallow } from 'zustand/shallow';
 
 export const HorizontalSlot = React.memo(
   ({
@@ -14,10 +17,11 @@ export const HorizontalSlot = React.memo(
     slotName = 'header', // 'header' or 'footer'
     slotStyle = {},
     onResize,
-    isEditing,
     maxHeight,
     componentType,
   }) => {
+    const { moduleId } = useModuleContext();
+    const isEditing = useStore((state) => state.modeStore.modules[moduleId].currentMode === 'edit', shallow);
     const parsedHeight = parseInt(height, 10);
     const { getRootProps, getHandleProps, getResizeState } = useSubContainerResizable({
       initialHeight: parsedHeight,
diff --git a/frontend/src/AppBuilder/Widgets/Form/Form.jsx b/frontend/src/AppBuilder/Widgets/Form/Form.jsx
index a8da234352..065a1592e6 100644
--- a/frontend/src/AppBuilder/Widgets/Form/Form.jsx
+++ b/frontend/src/AppBuilder/Widgets/Form/Form.jsx
@@ -341,13 +341,8 @@ const FormComponent = (props) => {
     });
     setChildrenData(childDataRef.current);
   };
-
-  const mode = useStore((state) => state.currentMode, shallow);
-  const isEditing = mode === 'edit';
-
-  const activeSlot = useActiveSlot(isEditing ? id : null); // Track the active slot for this widget
+  const activeSlot = useActiveSlot(id); // Track the active slot for this widget
   const setComponentProperty = useStore((state) => state.setComponentProperty, shallow);
-  // const updateContainerAutoHeight = useStore((state) => state.updateContainerAutoHeight);
 
   const updateHeaderSizeInStore = ({ newHeight }) => {
     const _height = parseInt(newHeight, 10);
@@ -388,7 +383,6 @@ const FormComponent = (props) => {
         <HorizontalSlot
           slotName="header"
           slotStyle={formHeader}
-          isEditing={isEditing}
           id={`${id}-header`}
           height={headerHeight}
           width={width}
@@ -469,7 +463,6 @@ const FormComponent = (props) => {
         <HorizontalSlot
           slotName="footer"
           slotStyle={formFooter}
-          isEditing={isEditing}
           id={`${id}-footer`}
           height={footerHeight}
           width={width}
diff --git a/frontend/src/AppBuilder/Widgets/ModalV2/Components/Footer.jsx b/frontend/src/AppBuilder/Widgets/ModalV2/Components/Footer.jsx
index a6297a350c..eb1c5c66d2 100644
--- a/frontend/src/AppBuilder/Widgets/ModalV2/Components/Footer.jsx
+++ b/frontend/src/AppBuilder/Widgets/ModalV2/Components/Footer.jsx
@@ -13,7 +13,6 @@ export const ModalFooter = React.memo(
     width,
     footerHeight,
     onClick,
-    isEditing,
     updateFooterSizeInStore,
     activeSlot,
     footerMaxHeight,
@@ -29,7 +28,6 @@ export const ModalFooter = React.memo(
             padding: `${4.5}px ${MODAL_CANVAS_PADDING}px`,
             margin: '0px',
           }}
-          isEditing={isEditing}
           id={`${id}-footer`}
           height={canvasFooterHeight}
           width={width}
diff --git a/frontend/src/AppBuilder/Widgets/ModalV2/Components/Header.jsx b/frontend/src/AppBuilder/Widgets/ModalV2/Components/Header.jsx
index 845b264c01..16656e0ca3 100644
--- a/frontend/src/AppBuilder/Widgets/ModalV2/Components/Header.jsx
+++ b/frontend/src/AppBuilder/Widgets/ModalV2/Components/Header.jsx
@@ -15,7 +15,6 @@ export const ModalHeader = React.memo(
     onHideModal,
     headerHeight,
     onClick,
-    isEditing,
     updateHeaderSizeInStore,
     activeSlot,
     headerMaxHeight,
@@ -34,7 +33,6 @@ export const ModalHeader = React.memo(
               maxHeight: isFullScreen ? `${headerMaxHeight}` : `${headerMaxHeight}px`,
               minHeight: '10px',
             }}
-            isEditing={isEditing}
             id={`${id}-header`}
             height={canvasHeaderHeight}
             width={width}
diff --git a/frontend/src/AppBuilder/Widgets/ModalV2/Components/Modal.jsx b/frontend/src/AppBuilder/Widgets/ModalV2/Components/Modal.jsx
index 7a0669b5c5..52a0dd32e5 100644
--- a/frontend/src/AppBuilder/Widgets/ModalV2/Components/Modal.jsx
+++ b/frontend/src/AppBuilder/Widgets/ModalV2/Components/Modal.jsx
@@ -29,9 +29,8 @@ export const ModalWidget = ({ ...restProps }) => {
     isFullScreen,
   } = restProps['modalProps'];
 
-  const isEditing = useStore((state) => state.currentMode === 'edit');
   const setComponentProperty = useStore((state) => state.setComponentProperty);
-  const activeSlot = useActiveSlot(isEditing ? id : null); // Track the active slot for this widget
+  const activeSlot = useActiveSlot(id); // Track the active slot for this widget
   const _modalHeight = isFullScreen ? '100vh' : `${modalHeight}px`;
   const headerMaxHeight = isFullScreen
     ? `calc(${_modalHeight} - ${footerHeight} - 100px - 10px)`
@@ -122,7 +121,6 @@ export const ModalWidget = ({ ...restProps }) => {
           onHideModal={onHideModal}
           headerHeight={headerHeight}
           onClick={handleModalSlotClick}
-          isEditing={isEditing}
           updateHeaderSizeInStore={updateHeaderSizeInStore}
           activeSlot={activeSlot}
           headerMaxHeight={headerMaxHeight}
@@ -168,7 +166,6 @@ export const ModalWidget = ({ ...restProps }) => {
           width={modalWidth}
           footerHeight={footerHeight}
           onClick={handleModalSlotClick}
-          isEditing={isEditing}
           updateFooterSizeInStore={updateFooterSizeInStore}
           activeSlot={activeSlot}
           footerMaxHeight={footerMaxHeight}
diff --git a/frontend/src/AppBuilder/_hooks/useActiveSlot.js b/frontend/src/AppBuilder/_hooks/useActiveSlot.js
index 14f80a366f..5b13f509c9 100644
--- a/frontend/src/AppBuilder/_hooks/useActiveSlot.js
+++ b/frontend/src/AppBuilder/_hooks/useActiveSlot.js
@@ -23,7 +23,6 @@ export const useActiveSlot = (widgetId) => {
   useEffect(() => {
     const handleDoubleClick = (event) => {
       let target = event.target;
-
       if (!widgetId) {
         setActiveSlot(null);
         return;

From ddcd0d65d9533532030b6cd9688aec6c08966c6e Mon Sep 17 00:00:00 2001
From: Nakul Nagargade <nakul@tooljet.com>
Date: Wed, 2 Jul 2025 12:25:07 +0530
Subject: [PATCH 2/4] Revert "Fix header resizer not coming up on Container,
 form and modal"

This reverts commit 709ab6250289c17fa100cf25a289c7b3c967bd52.
---
 frontend/src/AppBuilder/Widgets/Container/Container.jsx  | 6 +++++-
 .../Widgets/Form/Components/HorizontalSlot.jsx           | 6 +-----
 frontend/src/AppBuilder/Widgets/Form/Form.jsx            | 9 ++++++++-
 .../src/AppBuilder/Widgets/ModalV2/Components/Footer.jsx | 2 ++
 .../src/AppBuilder/Widgets/ModalV2/Components/Header.jsx | 2 ++
 .../src/AppBuilder/Widgets/ModalV2/Components/Modal.jsx  | 5 ++++-
 frontend/src/AppBuilder/_hooks/useActiveSlot.js          | 1 +
 7 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/frontend/src/AppBuilder/Widgets/Container/Container.jsx b/frontend/src/AppBuilder/Widgets/Container/Container.jsx
index de09b4fed0..61775f5919 100644
--- a/frontend/src/AppBuilder/Widgets/Container/Container.jsx
+++ b/frontend/src/AppBuilder/Widgets/Container/Container.jsx
@@ -33,6 +33,7 @@ export const Container = ({
     setExposedVariables,
     setExposedVariable
   );
+
   const { dynamicHeight } = properties;
 
   useDynamicHeight({
@@ -50,8 +51,10 @@ export const Container = ({
     shallow
   );
 
+  const isEditing = useStore((state) => state.currentMode === 'edit');
   const setComponentProperty = useStore((state) => state.setComponentProperty, shallow);
-  const activeSlot = useActiveSlot(id); // Track the active slot for this widget
+
+  const activeSlot = useActiveSlot(isEditing ? id : null); // Track the active slot for this widget
   const { borderRadius, borderColor, boxShadow } = styles;
   const { headerHeight = 80 } = properties;
   const headerMaxHeight = parseInt(height, 10) - 100 - 10;
@@ -115,6 +118,7 @@ export const Container = ({
             <HorizontalSlot
               slotName={'header'}
               slotStyle={containerHeaderStyles}
+              isEditing={isEditing}
               id={`${id}-header`}
               height={headerHeight}
               width={width}
diff --git a/frontend/src/AppBuilder/Widgets/Form/Components/HorizontalSlot.jsx b/frontend/src/AppBuilder/Widgets/Form/Components/HorizontalSlot.jsx
index f7a130a98b..7e73239e96 100644
--- a/frontend/src/AppBuilder/Widgets/Form/Components/HorizontalSlot.jsx
+++ b/frontend/src/AppBuilder/Widgets/Form/Components/HorizontalSlot.jsx
@@ -2,9 +2,6 @@ import React, { useEffect } from 'react';
 import { Container as SubContainer } from '@/AppBuilder/AppCanvas/Container';
 import { showGridLines, hideGridLines } from '@/AppBuilder/AppCanvas/Grid/gridUtils';
 import { useSubContainerResizable } from '@/AppBuilder/_hooks/useSubContainerResizable';
-import { useModuleContext } from '@/AppBuilder/_contexts/ModuleContext';
-import useStore from '@/AppBuilder/_stores/store';
-import { shallow } from 'zustand/shallow';
 
 export const HorizontalSlot = React.memo(
   ({
@@ -17,11 +14,10 @@ export const HorizontalSlot = React.memo(
     slotName = 'header', // 'header' or 'footer'
     slotStyle = {},
     onResize,
+    isEditing,
     maxHeight,
     componentType,
   }) => {
-    const { moduleId } = useModuleContext();
-    const isEditing = useStore((state) => state.modeStore.modules[moduleId].currentMode === 'edit', shallow);
     const parsedHeight = parseInt(height, 10);
     const { getRootProps, getHandleProps, getResizeState } = useSubContainerResizable({
       initialHeight: parsedHeight,
diff --git a/frontend/src/AppBuilder/Widgets/Form/Form.jsx b/frontend/src/AppBuilder/Widgets/Form/Form.jsx
index 065a1592e6..a8da234352 100644
--- a/frontend/src/AppBuilder/Widgets/Form/Form.jsx
+++ b/frontend/src/AppBuilder/Widgets/Form/Form.jsx
@@ -341,8 +341,13 @@ const FormComponent = (props) => {
     });
     setChildrenData(childDataRef.current);
   };
-  const activeSlot = useActiveSlot(id); // Track the active slot for this widget
+
+  const mode = useStore((state) => state.currentMode, shallow);
+  const isEditing = mode === 'edit';
+
+  const activeSlot = useActiveSlot(isEditing ? id : null); // Track the active slot for this widget
   const setComponentProperty = useStore((state) => state.setComponentProperty, shallow);
+  // const updateContainerAutoHeight = useStore((state) => state.updateContainerAutoHeight);
 
   const updateHeaderSizeInStore = ({ newHeight }) => {
     const _height = parseInt(newHeight, 10);
@@ -383,6 +388,7 @@ const FormComponent = (props) => {
         <HorizontalSlot
           slotName="header"
           slotStyle={formHeader}
+          isEditing={isEditing}
           id={`${id}-header`}
           height={headerHeight}
           width={width}
@@ -463,6 +469,7 @@ const FormComponent = (props) => {
         <HorizontalSlot
           slotName="footer"
           slotStyle={formFooter}
+          isEditing={isEditing}
           id={`${id}-footer`}
           height={footerHeight}
           width={width}
diff --git a/frontend/src/AppBuilder/Widgets/ModalV2/Components/Footer.jsx b/frontend/src/AppBuilder/Widgets/ModalV2/Components/Footer.jsx
index eb1c5c66d2..a6297a350c 100644
--- a/frontend/src/AppBuilder/Widgets/ModalV2/Components/Footer.jsx
+++ b/frontend/src/AppBuilder/Widgets/ModalV2/Components/Footer.jsx
@@ -13,6 +13,7 @@ export const ModalFooter = React.memo(
     width,
     footerHeight,
     onClick,
+    isEditing,
     updateFooterSizeInStore,
     activeSlot,
     footerMaxHeight,
@@ -28,6 +29,7 @@ export const ModalFooter = React.memo(
             padding: `${4.5}px ${MODAL_CANVAS_PADDING}px`,
             margin: '0px',
           }}
+          isEditing={isEditing}
           id={`${id}-footer`}
           height={canvasFooterHeight}
           width={width}
diff --git a/frontend/src/AppBuilder/Widgets/ModalV2/Components/Header.jsx b/frontend/src/AppBuilder/Widgets/ModalV2/Components/Header.jsx
index 16656e0ca3..845b264c01 100644
--- a/frontend/src/AppBuilder/Widgets/ModalV2/Components/Header.jsx
+++ b/frontend/src/AppBuilder/Widgets/ModalV2/Components/Header.jsx
@@ -15,6 +15,7 @@ export const ModalHeader = React.memo(
     onHideModal,
     headerHeight,
     onClick,
+    isEditing,
     updateHeaderSizeInStore,
     activeSlot,
     headerMaxHeight,
@@ -33,6 +34,7 @@ export const ModalHeader = React.memo(
               maxHeight: isFullScreen ? `${headerMaxHeight}` : `${headerMaxHeight}px`,
               minHeight: '10px',
             }}
+            isEditing={isEditing}
             id={`${id}-header`}
             height={canvasHeaderHeight}
             width={width}
diff --git a/frontend/src/AppBuilder/Widgets/ModalV2/Components/Modal.jsx b/frontend/src/AppBuilder/Widgets/ModalV2/Components/Modal.jsx
index 52a0dd32e5..7a0669b5c5 100644
--- a/frontend/src/AppBuilder/Widgets/ModalV2/Components/Modal.jsx
+++ b/frontend/src/AppBuilder/Widgets/ModalV2/Components/Modal.jsx
@@ -29,8 +29,9 @@ export const ModalWidget = ({ ...restProps }) => {
     isFullScreen,
   } = restProps['modalProps'];
 
+  const isEditing = useStore((state) => state.currentMode === 'edit');
   const setComponentProperty = useStore((state) => state.setComponentProperty);
-  const activeSlot = useActiveSlot(id); // Track the active slot for this widget
+  const activeSlot = useActiveSlot(isEditing ? id : null); // Track the active slot for this widget
   const _modalHeight = isFullScreen ? '100vh' : `${modalHeight}px`;
   const headerMaxHeight = isFullScreen
     ? `calc(${_modalHeight} - ${footerHeight} - 100px - 10px)`
@@ -121,6 +122,7 @@ export const ModalWidget = ({ ...restProps }) => {
           onHideModal={onHideModal}
           headerHeight={headerHeight}
           onClick={handleModalSlotClick}
+          isEditing={isEditing}
           updateHeaderSizeInStore={updateHeaderSizeInStore}
           activeSlot={activeSlot}
           headerMaxHeight={headerMaxHeight}
@@ -166,6 +168,7 @@ export const ModalWidget = ({ ...restProps }) => {
           width={modalWidth}
           footerHeight={footerHeight}
           onClick={handleModalSlotClick}
+          isEditing={isEditing}
           updateFooterSizeInStore={updateFooterSizeInStore}
           activeSlot={activeSlot}
           footerMaxHeight={footerMaxHeight}
diff --git a/frontend/src/AppBuilder/_hooks/useActiveSlot.js b/frontend/src/AppBuilder/_hooks/useActiveSlot.js
index 5b13f509c9..14f80a366f 100644
--- a/frontend/src/AppBuilder/_hooks/useActiveSlot.js
+++ b/frontend/src/AppBuilder/_hooks/useActiveSlot.js
@@ -23,6 +23,7 @@ export const useActiveSlot = (widgetId) => {
   useEffect(() => {
     const handleDoubleClick = (event) => {
       let target = event.target;
+
       if (!widgetId) {
         setActiveSlot(null);
         return;

From f188fe82b44f3f19284c2f4ae0d3e77aa4ab3cb9 Mon Sep 17 00:00:00 2001
From: Nakul Nagargade <nakul@tooljet.com>
Date: Wed, 2 Jul 2025 12:26:44 +0530
Subject: [PATCH 3/4] Fix header resizer not coming up on Container, form and
 modal

---
 frontend/src/AppBuilder/Widgets/Container/Container.jsx  | 6 +++++-
 .../Widgets/Form/Components/HorizontalSlot.jsx           | 6 +-----
 frontend/src/AppBuilder/Widgets/Form/Form.jsx            | 9 ++++++++-
 .../src/AppBuilder/Widgets/ModalV2/Components/Footer.jsx | 2 ++
 .../src/AppBuilder/Widgets/ModalV2/Components/Header.jsx | 2 ++
 .../src/AppBuilder/Widgets/ModalV2/Components/Modal.jsx  | 5 ++++-
 frontend/src/AppBuilder/_hooks/useActiveSlot.js          | 1 +
 7 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/frontend/src/AppBuilder/Widgets/Container/Container.jsx b/frontend/src/AppBuilder/Widgets/Container/Container.jsx
index de09b4fed0..61775f5919 100644
--- a/frontend/src/AppBuilder/Widgets/Container/Container.jsx
+++ b/frontend/src/AppBuilder/Widgets/Container/Container.jsx
@@ -33,6 +33,7 @@ export const Container = ({
     setExposedVariables,
     setExposedVariable
   );
+
   const { dynamicHeight } = properties;
 
   useDynamicHeight({
@@ -50,8 +51,10 @@ export const Container = ({
     shallow
   );
 
+  const isEditing = useStore((state) => state.currentMode === 'edit');
   const setComponentProperty = useStore((state) => state.setComponentProperty, shallow);
-  const activeSlot = useActiveSlot(id); // Track the active slot for this widget
+
+  const activeSlot = useActiveSlot(isEditing ? id : null); // Track the active slot for this widget
   const { borderRadius, borderColor, boxShadow } = styles;
   const { headerHeight = 80 } = properties;
   const headerMaxHeight = parseInt(height, 10) - 100 - 10;
@@ -115,6 +118,7 @@ export const Container = ({
             <HorizontalSlot
               slotName={'header'}
               slotStyle={containerHeaderStyles}
+              isEditing={isEditing}
               id={`${id}-header`}
               height={headerHeight}
               width={width}
diff --git a/frontend/src/AppBuilder/Widgets/Form/Components/HorizontalSlot.jsx b/frontend/src/AppBuilder/Widgets/Form/Components/HorizontalSlot.jsx
index f7a130a98b..7e73239e96 100644
--- a/frontend/src/AppBuilder/Widgets/Form/Components/HorizontalSlot.jsx
+++ b/frontend/src/AppBuilder/Widgets/Form/Components/HorizontalSlot.jsx
@@ -2,9 +2,6 @@ import React, { useEffect } from 'react';
 import { Container as SubContainer } from '@/AppBuilder/AppCanvas/Container';
 import { showGridLines, hideGridLines } from '@/AppBuilder/AppCanvas/Grid/gridUtils';
 import { useSubContainerResizable } from '@/AppBuilder/_hooks/useSubContainerResizable';
-import { useModuleContext } from '@/AppBuilder/_contexts/ModuleContext';
-import useStore from '@/AppBuilder/_stores/store';
-import { shallow } from 'zustand/shallow';
 
 export const HorizontalSlot = React.memo(
   ({
@@ -17,11 +14,10 @@ export const HorizontalSlot = React.memo(
     slotName = 'header', // 'header' or 'footer'
     slotStyle = {},
     onResize,
+    isEditing,
     maxHeight,
     componentType,
   }) => {
-    const { moduleId } = useModuleContext();
-    const isEditing = useStore((state) => state.modeStore.modules[moduleId].currentMode === 'edit', shallow);
     const parsedHeight = parseInt(height, 10);
     const { getRootProps, getHandleProps, getResizeState } = useSubContainerResizable({
       initialHeight: parsedHeight,
diff --git a/frontend/src/AppBuilder/Widgets/Form/Form.jsx b/frontend/src/AppBuilder/Widgets/Form/Form.jsx
index 065a1592e6..a8da234352 100644
--- a/frontend/src/AppBuilder/Widgets/Form/Form.jsx
+++ b/frontend/src/AppBuilder/Widgets/Form/Form.jsx
@@ -341,8 +341,13 @@ const FormComponent = (props) => {
     });
     setChildrenData(childDataRef.current);
   };
-  const activeSlot = useActiveSlot(id); // Track the active slot for this widget
+
+  const mode = useStore((state) => state.currentMode, shallow);
+  const isEditing = mode === 'edit';
+
+  const activeSlot = useActiveSlot(isEditing ? id : null); // Track the active slot for this widget
   const setComponentProperty = useStore((state) => state.setComponentProperty, shallow);
+  // const updateContainerAutoHeight = useStore((state) => state.updateContainerAutoHeight);
 
   const updateHeaderSizeInStore = ({ newHeight }) => {
     const _height = parseInt(newHeight, 10);
@@ -383,6 +388,7 @@ const FormComponent = (props) => {
         <HorizontalSlot
           slotName="header"
           slotStyle={formHeader}
+          isEditing={isEditing}
           id={`${id}-header`}
           height={headerHeight}
           width={width}
@@ -463,6 +469,7 @@ const FormComponent = (props) => {
         <HorizontalSlot
           slotName="footer"
           slotStyle={formFooter}
+          isEditing={isEditing}
           id={`${id}-footer`}
           height={footerHeight}
           width={width}
diff --git a/frontend/src/AppBuilder/Widgets/ModalV2/Components/Footer.jsx b/frontend/src/AppBuilder/Widgets/ModalV2/Components/Footer.jsx
index eb1c5c66d2..a6297a350c 100644
--- a/frontend/src/AppBuilder/Widgets/ModalV2/Components/Footer.jsx
+++ b/frontend/src/AppBuilder/Widgets/ModalV2/Components/Footer.jsx
@@ -13,6 +13,7 @@ export const ModalFooter = React.memo(
     width,
     footerHeight,
     onClick,
+    isEditing,
     updateFooterSizeInStore,
     activeSlot,
     footerMaxHeight,
@@ -28,6 +29,7 @@ export const ModalFooter = React.memo(
             padding: `${4.5}px ${MODAL_CANVAS_PADDING}px`,
             margin: '0px',
           }}
+          isEditing={isEditing}
           id={`${id}-footer`}
           height={canvasFooterHeight}
           width={width}
diff --git a/frontend/src/AppBuilder/Widgets/ModalV2/Components/Header.jsx b/frontend/src/AppBuilder/Widgets/ModalV2/Components/Header.jsx
index 16656e0ca3..845b264c01 100644
--- a/frontend/src/AppBuilder/Widgets/ModalV2/Components/Header.jsx
+++ b/frontend/src/AppBuilder/Widgets/ModalV2/Components/Header.jsx
@@ -15,6 +15,7 @@ export const ModalHeader = React.memo(
     onHideModal,
     headerHeight,
     onClick,
+    isEditing,
     updateHeaderSizeInStore,
     activeSlot,
     headerMaxHeight,
@@ -33,6 +34,7 @@ export const ModalHeader = React.memo(
               maxHeight: isFullScreen ? `${headerMaxHeight}` : `${headerMaxHeight}px`,
               minHeight: '10px',
             }}
+            isEditing={isEditing}
             id={`${id}-header`}
             height={canvasHeaderHeight}
             width={width}
diff --git a/frontend/src/AppBuilder/Widgets/ModalV2/Components/Modal.jsx b/frontend/src/AppBuilder/Widgets/ModalV2/Components/Modal.jsx
index 52a0dd32e5..7a0669b5c5 100644
--- a/frontend/src/AppBuilder/Widgets/ModalV2/Components/Modal.jsx
+++ b/frontend/src/AppBuilder/Widgets/ModalV2/Components/Modal.jsx
@@ -29,8 +29,9 @@ export const ModalWidget = ({ ...restProps }) => {
     isFullScreen,
   } = restProps['modalProps'];
 
+  const isEditing = useStore((state) => state.currentMode === 'edit');
   const setComponentProperty = useStore((state) => state.setComponentProperty);
-  const activeSlot = useActiveSlot(id); // Track the active slot for this widget
+  const activeSlot = useActiveSlot(isEditing ? id : null); // Track the active slot for this widget
   const _modalHeight = isFullScreen ? '100vh' : `${modalHeight}px`;
   const headerMaxHeight = isFullScreen
     ? `calc(${_modalHeight} - ${footerHeight} - 100px - 10px)`
@@ -121,6 +122,7 @@ export const ModalWidget = ({ ...restProps }) => {
           onHideModal={onHideModal}
           headerHeight={headerHeight}
           onClick={handleModalSlotClick}
+          isEditing={isEditing}
           updateHeaderSizeInStore={updateHeaderSizeInStore}
           activeSlot={activeSlot}
           headerMaxHeight={headerMaxHeight}
@@ -166,6 +168,7 @@ export const ModalWidget = ({ ...restProps }) => {
           width={modalWidth}
           footerHeight={footerHeight}
           onClick={handleModalSlotClick}
+          isEditing={isEditing}
           updateFooterSizeInStore={updateFooterSizeInStore}
           activeSlot={activeSlot}
           footerMaxHeight={footerMaxHeight}
diff --git a/frontend/src/AppBuilder/_hooks/useActiveSlot.js b/frontend/src/AppBuilder/_hooks/useActiveSlot.js
index 5b13f509c9..14f80a366f 100644
--- a/frontend/src/AppBuilder/_hooks/useActiveSlot.js
+++ b/frontend/src/AppBuilder/_hooks/useActiveSlot.js
@@ -23,6 +23,7 @@ export const useActiveSlot = (widgetId) => {
   useEffect(() => {
     const handleDoubleClick = (event) => {
       let target = event.target;
+
       if (!widgetId) {
         setActiveSlot(null);
         return;

From cd7d831ed9d0c65b6d49968d10c034d5903d7beb Mon Sep 17 00:00:00 2001
From: Nakul Nagargade <nakul@tooljet.com>
Date: Wed, 2 Jul 2025 12:23:49 +0530
Subject: [PATCH 4/4] Fix header resizer not coming up on Container, form and
 modal

---
 frontend/src/AppBuilder/Widgets/Container/Container.jsx  | 6 +-----
 .../Widgets/Form/Components/HorizontalSlot.jsx           | 6 +++++-
 frontend/src/AppBuilder/Widgets/Form/Form.jsx            | 9 +--------
 .../src/AppBuilder/Widgets/ModalV2/Components/Footer.jsx | 2 --
 .../src/AppBuilder/Widgets/ModalV2/Components/Header.jsx | 2 --
 .../src/AppBuilder/Widgets/ModalV2/Components/Modal.jsx  | 5 +----
 frontend/src/AppBuilder/_hooks/useActiveSlot.js          | 1 -
 7 files changed, 8 insertions(+), 23 deletions(-)

diff --git a/frontend/src/AppBuilder/Widgets/Container/Container.jsx b/frontend/src/AppBuilder/Widgets/Container/Container.jsx
index 61775f5919..de09b4fed0 100644
--- a/frontend/src/AppBuilder/Widgets/Container/Container.jsx
+++ b/frontend/src/AppBuilder/Widgets/Container/Container.jsx
@@ -33,7 +33,6 @@ export const Container = ({
     setExposedVariables,
     setExposedVariable
   );
-
   const { dynamicHeight } = properties;
 
   useDynamicHeight({
@@ -51,10 +50,8 @@ export const Container = ({
     shallow
   );
 
-  const isEditing = useStore((state) => state.currentMode === 'edit');
   const setComponentProperty = useStore((state) => state.setComponentProperty, shallow);
-
-  const activeSlot = useActiveSlot(isEditing ? id : null); // Track the active slot for this widget
+  const activeSlot = useActiveSlot(id); // Track the active slot for this widget
   const { borderRadius, borderColor, boxShadow } = styles;
   const { headerHeight = 80 } = properties;
   const headerMaxHeight = parseInt(height, 10) - 100 - 10;
@@ -118,7 +115,6 @@ export const Container = ({
             <HorizontalSlot
               slotName={'header'}
               slotStyle={containerHeaderStyles}
-              isEditing={isEditing}
               id={`${id}-header`}
               height={headerHeight}
               width={width}
diff --git a/frontend/src/AppBuilder/Widgets/Form/Components/HorizontalSlot.jsx b/frontend/src/AppBuilder/Widgets/Form/Components/HorizontalSlot.jsx
index 7e73239e96..f7a130a98b 100644
--- a/frontend/src/AppBuilder/Widgets/Form/Components/HorizontalSlot.jsx
+++ b/frontend/src/AppBuilder/Widgets/Form/Components/HorizontalSlot.jsx
@@ -2,6 +2,9 @@ import React, { useEffect } from 'react';
 import { Container as SubContainer } from '@/AppBuilder/AppCanvas/Container';
 import { showGridLines, hideGridLines } from '@/AppBuilder/AppCanvas/Grid/gridUtils';
 import { useSubContainerResizable } from '@/AppBuilder/_hooks/useSubContainerResizable';
+import { useModuleContext } from '@/AppBuilder/_contexts/ModuleContext';
+import useStore from '@/AppBuilder/_stores/store';
+import { shallow } from 'zustand/shallow';
 
 export const HorizontalSlot = React.memo(
   ({
@@ -14,10 +17,11 @@ export const HorizontalSlot = React.memo(
     slotName = 'header', // 'header' or 'footer'
     slotStyle = {},
     onResize,
-    isEditing,
     maxHeight,
     componentType,
   }) => {
+    const { moduleId } = useModuleContext();
+    const isEditing = useStore((state) => state.modeStore.modules[moduleId].currentMode === 'edit', shallow);
     const parsedHeight = parseInt(height, 10);
     const { getRootProps, getHandleProps, getResizeState } = useSubContainerResizable({
       initialHeight: parsedHeight,
diff --git a/frontend/src/AppBuilder/Widgets/Form/Form.jsx b/frontend/src/AppBuilder/Widgets/Form/Form.jsx
index a8da234352..065a1592e6 100644
--- a/frontend/src/AppBuilder/Widgets/Form/Form.jsx
+++ b/frontend/src/AppBuilder/Widgets/Form/Form.jsx
@@ -341,13 +341,8 @@ const FormComponent = (props) => {
     });
     setChildrenData(childDataRef.current);
   };
-
-  const mode = useStore((state) => state.currentMode, shallow);
-  const isEditing = mode === 'edit';
-
-  const activeSlot = useActiveSlot(isEditing ? id : null); // Track the active slot for this widget
+  const activeSlot = useActiveSlot(id); // Track the active slot for this widget
   const setComponentProperty = useStore((state) => state.setComponentProperty, shallow);
-  // const updateContainerAutoHeight = useStore((state) => state.updateContainerAutoHeight);
 
   const updateHeaderSizeInStore = ({ newHeight }) => {
     const _height = parseInt(newHeight, 10);
@@ -388,7 +383,6 @@ const FormComponent = (props) => {
         <HorizontalSlot
           slotName="header"
           slotStyle={formHeader}
-          isEditing={isEditing}
           id={`${id}-header`}
           height={headerHeight}
           width={width}
@@ -469,7 +463,6 @@ const FormComponent = (props) => {
         <HorizontalSlot
           slotName="footer"
           slotStyle={formFooter}
-          isEditing={isEditing}
           id={`${id}-footer`}
           height={footerHeight}
           width={width}
diff --git a/frontend/src/AppBuilder/Widgets/ModalV2/Components/Footer.jsx b/frontend/src/AppBuilder/Widgets/ModalV2/Components/Footer.jsx
index a6297a350c..eb1c5c66d2 100644
--- a/frontend/src/AppBuilder/Widgets/ModalV2/Components/Footer.jsx
+++ b/frontend/src/AppBuilder/Widgets/ModalV2/Components/Footer.jsx
@@ -13,7 +13,6 @@ export const ModalFooter = React.memo(
     width,
     footerHeight,
     onClick,
-    isEditing,
     updateFooterSizeInStore,
     activeSlot,
     footerMaxHeight,
@@ -29,7 +28,6 @@ export const ModalFooter = React.memo(
             padding: `${4.5}px ${MODAL_CANVAS_PADDING}px`,
             margin: '0px',
           }}
-          isEditing={isEditing}
           id={`${id}-footer`}
           height={canvasFooterHeight}
           width={width}
diff --git a/frontend/src/AppBuilder/Widgets/ModalV2/Components/Header.jsx b/frontend/src/AppBuilder/Widgets/ModalV2/Components/Header.jsx
index 845b264c01..16656e0ca3 100644
--- a/frontend/src/AppBuilder/Widgets/ModalV2/Components/Header.jsx
+++ b/frontend/src/AppBuilder/Widgets/ModalV2/Components/Header.jsx
@@ -15,7 +15,6 @@ export const ModalHeader = React.memo(
     onHideModal,
     headerHeight,
     onClick,
-    isEditing,
     updateHeaderSizeInStore,
     activeSlot,
     headerMaxHeight,
@@ -34,7 +33,6 @@ export const ModalHeader = React.memo(
               maxHeight: isFullScreen ? `${headerMaxHeight}` : `${headerMaxHeight}px`,
               minHeight: '10px',
             }}
-            isEditing={isEditing}
             id={`${id}-header`}
             height={canvasHeaderHeight}
             width={width}
diff --git a/frontend/src/AppBuilder/Widgets/ModalV2/Components/Modal.jsx b/frontend/src/AppBuilder/Widgets/ModalV2/Components/Modal.jsx
index 7a0669b5c5..52a0dd32e5 100644
--- a/frontend/src/AppBuilder/Widgets/ModalV2/Components/Modal.jsx
+++ b/frontend/src/AppBuilder/Widgets/ModalV2/Components/Modal.jsx
@@ -29,9 +29,8 @@ export const ModalWidget = ({ ...restProps }) => {
     isFullScreen,
   } = restProps['modalProps'];
 
-  const isEditing = useStore((state) => state.currentMode === 'edit');
   const setComponentProperty = useStore((state) => state.setComponentProperty);
-  const activeSlot = useActiveSlot(isEditing ? id : null); // Track the active slot for this widget
+  const activeSlot = useActiveSlot(id); // Track the active slot for this widget
   const _modalHeight = isFullScreen ? '100vh' : `${modalHeight}px`;
   const headerMaxHeight = isFullScreen
     ? `calc(${_modalHeight} - ${footerHeight} - 100px - 10px)`
@@ -122,7 +121,6 @@ export const ModalWidget = ({ ...restProps }) => {
           onHideModal={onHideModal}
           headerHeight={headerHeight}
           onClick={handleModalSlotClick}
-          isEditing={isEditing}
           updateHeaderSizeInStore={updateHeaderSizeInStore}
           activeSlot={activeSlot}
           headerMaxHeight={headerMaxHeight}
@@ -168,7 +166,6 @@ export const ModalWidget = ({ ...restProps }) => {
           width={modalWidth}
           footerHeight={footerHeight}
           onClick={handleModalSlotClick}
-          isEditing={isEditing}
           updateFooterSizeInStore={updateFooterSizeInStore}
           activeSlot={activeSlot}
           footerMaxHeight={footerMaxHeight}
diff --git a/frontend/src/AppBuilder/_hooks/useActiveSlot.js b/frontend/src/AppBuilder/_hooks/useActiveSlot.js
index 14f80a366f..5b13f509c9 100644
--- a/frontend/src/AppBuilder/_hooks/useActiveSlot.js
+++ b/frontend/src/AppBuilder/_hooks/useActiveSlot.js
@@ -23,7 +23,6 @@ export const useActiveSlot = (widgetId) => {
   useEffect(() => {
     const handleDoubleClick = (event) => {
       let target = event.target;
-
       if (!widgetId) {
         setActiveSlot(null);
         return;