modal full size

frontend/src/AppBuilder/Widgets/ModalV2/Components/Footer.jsx

@@ -17,6 +17,7 @@ export const ModalFooter = React.memo(
     updateFooterSizeInStore,
     activeSlot,
     footerMaxHeight,
+    isFullScreen,
   }) => {
     const canvasFooterHeight = getCanvasHeight(footerHeight);
     return (
@@ -37,7 +38,7 @@ export const ModalFooter = React.memo(
           isActive={activeSlot === `${id}-footer`}
           onResize={updateFooterSizeInStore}
           componentType="ModalV2"
-          maxHeight={footerMaxHeight}
+          maxHeight={isFullScreen ? undefined : footerMaxHeight}
         />
         {isDisabled && (
           <div

frontend/src/AppBuilder/Widgets/ModalV2/Components/Header.jsx

@@ -19,8 +19,10 @@ export const ModalHeader = React.memo(
     updateHeaderSizeInStore,
     activeSlot,
     headerMaxHeight,
+    isFullScreen,
   }) => {
     const canvasHeaderHeight = getCanvasHeight(headerHeight);
+    // console.log(headerMaxHeight, 'headerMaxHeight');
     return (
       <BootstrapModal.Header style={{ ...customStyles.modalHeader }} data-cy={`modal-header`} onClick={onClick}>
         <div style={{ position: 'relative', width: '100%', height: '100%' }}>
@@ -29,7 +31,8 @@ export const ModalHeader = React.memo(
             slotStyle={{
               height: `100%`,
               padding: `${4.5}px ${MODAL_CANVAS_PADDING}px`,
-              maxHeight: `${headerMaxHeight}px`,
+              maxHeight: `${headerMaxHeight}`,
+              minHeight: '10px',
             }}
             isEditing={isEditing}
             id={`${id}-header`}
@@ -40,7 +43,7 @@ export const ModalHeader = React.memo(
             isActive={activeSlot === `${id}-header`}
             onResize={updateHeaderSizeInStore}
             componentType="ModalV2"
-            maxHeight={headerMaxHeight}
+            maxHeight={isFullScreen ? undefined : headerMaxHeight}
           />
         </div>
         {isDisabled && (

frontend/src/AppBuilder/Widgets/ModalV2/Components/Modal.jsx

@@ -26,14 +26,27 @@ export const ModalWidget = ({ ...restProps }) => {
     footerHeight,
     onSelectModal,
     modalHeight,
+    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 headerMaxHeight = parseInt(modalHeight, 10) - parseInt(footerHeight, 10) - 100 - 10;
-  const footerMaxHeight = parseInt(modalHeight, 10) - parseInt(headerHeight, 10) - 100 - 10;
+  const _modalHeight = isFullScreen ? '100vh' : `${modalHeight}px`;
+  const headerMaxHeight = isFullScreen
+    ? `calc(${_modalHeight} - ${footerHeight} - 100px - 10px)`
+    : parseInt(_modalHeight, 10) - parseInt(footerHeight, 10) - 100 - 10;
+  const footerMaxHeight = isFullScreen
+    ? `calc(${_modalHeight} - ${headerHeight} - 100px - 10px)`
+    : parseInt(_modalHeight, 10) - parseInt(headerHeight, 10) - 100 - 10;
 
+  // const headerMaxHeight = `calc(${_modalHeight} - ${footerHeight} - 100px - 10px)`;
+  // const footerMaxHeight = `calc(${_modalHeight} - ${headerHeight} - 100px - 10px)`;
+
+  // const headerMaxHeight = parseInt(_modalHeight, 10) - parseInt(footerHeight, 10) - 100 - 10;
+  // const footerMaxHeight = parseInt(_modalHeight, 10) - parseInt(headerHeight, 10) - 100 - 10;
+  console.log(headerMaxHeight, modalHeight, isFullScreen, 'headerMaxHeight');
+  console.log(footerMaxHeight, 'footerMaxHeight');
   const updateHeaderSizeInStore = ({ newHeight }) => {
     const _height = parseInt(newHeight, 10);
     setComponentProperty(id, `headerHeight`, _height, 'properties', 'value', false);
@@ -75,11 +88,12 @@ export const ModalWidget = ({ ...restProps }) => {
     setTimeout(() => {
       const modalContent = document.querySelector(`.tj-modal-content-${id}`);
       if (restProps.show && modalContent) {
-        modalContent.style.height = `${modalHeight}px`;
+        console.log(_modalHeight, 'modalContent');
+        modalContent.style.height = isFullScreen ? '100vh' : `${modalHeight}px`;
       }
     }, 100);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [modalHeight, restProps.show]);
+  }, [modalHeight, restProps.show, isFullScreen]);
 
   return (
     <BootstrapModal
@@ -93,7 +107,6 @@ export const ModalWidget = ({ ...restProps }) => {
         }
       }}
       onClick={handleModalSlotClick}
-      // style={{ height: `${modalHeight}px`, maxHeight: '100%' }}
     >
       {showConfigHandler && (
         <ConfigHandle
@@ -120,6 +133,7 @@ export const ModalWidget = ({ ...restProps }) => {
           updateHeaderSizeInStore={updateHeaderSizeInStore}
           activeSlot={activeSlot}
           headerMaxHeight={headerMaxHeight}
+          isFullScreen={isFullScreen}
         />
       )}
       <BootstrapModal.Body style={{ ...customStyles.modalBody }} ref={parentRef} id={id} data-cy={`modal-body`}>
@@ -165,6 +179,7 @@ export const ModalWidget = ({ ...restProps }) => {
           updateFooterSizeInStore={updateFooterSizeInStore}
           activeSlot={activeSlot}
           footerMaxHeight={footerMaxHeight}
+          isFullScreen={isFullScreen}
         />
       )}
     </BootstrapModal>

frontend/src/AppBuilder/Widgets/ModalV2/ModalV2.jsx

@@ -14,7 +14,6 @@ import {
 } from '@/AppBuilder/Widgets/ModalV2/helpers/utils';
 import { createModalStyles } from '@/AppBuilder/Widgets/ModalV2/helpers/stylesFactory';
 import { onShowSideEffects, onHideSideEffects } from '@/AppBuilder/Widgets/ModalV2/helpers/sideEffects';
-
 import '@/AppBuilder/Widgets/ModalV2/style.scss';
 
 export const ModalV2 = function Modal({
@@ -66,6 +65,8 @@ export const ModalV2 = function Modal({
     ? `calc(100vh - 48px - 40px - ${headerHeightPx} - ${footerHeightPx})`
     : computedModalBodyHeight;
 
+  console.log(computedCanvasHeight, 'computedCanvasHeight');
+
   useEffect(() => {
     const exposedVariables = {
       open: async function () {
@@ -236,6 +237,7 @@ export const ModalV2 = function Modal({
           modalBodyHeight: computedCanvasHeight,
           modalWidth,
           onSelectModal: setSelectedComponentAsModal,
+          isFullScreen,
         }}
       />
     </div>

frontend/src/AppBuilder/_hooks/useSubContainerResizable.js

@@ -47,6 +47,7 @@ export const useSubContainerResizable = (options = {}) => {
       e.stopPropagation();
       e.preventDefault();
       const startHeight = parseInt(parentRef.current.clientHeight);
+      console.log(startHeight, 'startHeight');
       const startWidth = parseInt(parentRef.current.clientWidth);
       const parentWidth = parentRef.current.parentElement ? parentRef.current.parentElement.clientWidth : startWidth;
       const startY = e.clientY;