From d84ba96bc3436a9712d345addf01fdb829a1e02a Mon Sep 17 00:00:00 2001
From: Nakul Nagargade <nakul@tooljet.com>
Date: Wed, 2 Jul 2025 12:23:49 +0530
Subject: [PATCH] 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;