fix: revert "fix: canvas resizing issues" (appsmithorg#35129)

## Description
This reverts commit cbe1f58.

## Automation

/ok-to-test tags="@tag.All"

### 🔍 Cypress test results
<!-- This is an auto-generated comment: Cypress test results  -->
> [!TIP]
> 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/10072532868>
> Commit: 9ab856d
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=10072532868&attempt=2"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.All`
> Spec:
> <hr>Wed, 24 Jul 2024 09:06:01 UTC
<!-- end of auto-generated comment: Cypress test results  -->


## Communication
Should the DevRel and Marketing teams inform users about this change?
- [ ] Yes
- [x] No

app/client/src/layoutSystems/common/mainContainerResizer/MainContainerResizer.tsx

@@ -4,9 +4,9 @@ import { useDispatch, useSelector } from "react-redux";
 import { getCurrentApplicationLayout } from "selectors/editorSelectors";
 import { setAutoCanvasResizing } from "actions/autoLayoutActions";
 import styled from "styled-components";
+import { AUTOLAYOUT_RESIZER_WIDTH_BUFFER } from "utils/hooks/useDynamicAppLayout";
 import { importSvg } from "design-system-old";
 import { CANVAS_VIEWPORT } from "constants/componentClassNameConstants";
-import { AUTOLAYOUT_RESIZER_WIDTH_BUFFER } from "./constants";
 
 const CanvasResizerIcon = importSvg(
   async () => import("assets/icons/ads/app-icons/canvas-resizer.svg"),

app/client/src/pages/AppViewer/AppPage/AppPage.tsx → app/client/src/pages/AppViewer/AppPage.tsx

@@ -1,18 +1,15 @@
-import React, { useEffect, useMemo, useRef } from "react";
+import React, { useEffect, useMemo } from "react";
 import AnalyticsUtil from "@appsmith/utils/AnalyticsUtil";
+import { useDynamicAppLayout } from "utils/hooks/useDynamicAppLayout";
 import type { CanvasWidgetStructure } from "WidgetProvider/constants";
-import { useDispatch, useSelector } from "react-redux";
+import { useSelector } from "react-redux";
 import { getAppMode } from "@appsmith/selectors/applicationSelectors";
+import { PageView, PageViewWrapper } from "./AppPage.styled";
 import { APP_MODE } from "entities/App";
 import { renderAppsmithCanvas } from "layoutSystems/CanvasFactory";
 import type { WidgetProps } from "widgets/BaseWidget";
 import { useAppViewerSidebarProperties } from "utils/hooks/useAppViewerSidebarProperties";
 import { getIsAnvilLayout } from "layoutSystems/anvil/integrations/selectors";
-import { debounce } from "lodash";
-import { updateCanvasLayoutAction } from "actions/editorActions";
-
-import { PageView, PageViewWrapper } from "./AppPage.styled";
-import { RESIZE_DEBOUNCE_THRESHOLD } from "./constants";
 
 interface AppPageProps {
   appName?: string;
@@ -23,61 +20,35 @@ interface AppPageProps {
 }
 
 export function AppPage(props: AppPageProps) {
-  const { appName, canvasWidth, pageId, pageName, widgetsStructure } = props;
-
-  const dispatch = useDispatch();
   const appMode = useSelector(getAppMode);
   const isPublished = appMode === APP_MODE.PUBLISHED;
   const isAnvilLayout = useSelector(getIsAnvilLayout);
   const { hasSidebarPinned, sidebarWidth } = useAppViewerSidebarProperties();
 
   const width: string = useMemo(() => {
-    return isAnvilLayout ? "100%" : `${canvasWidth}px`;
-  }, [isAnvilLayout, canvasWidth]);
-
-  const pageViewWrapperRef = useRef<HTMLDivElement>(null);
-  useEffect(() => {
-    const wrapperElement = pageViewWrapperRef.current;
-    if (wrapperElement) {
-      const debouncedResize = debounce(
-        ([
-          {
-            contentRect: { width },
-          },
-        ]) => {
-          dispatch(updateCanvasLayoutAction(width - sidebarWidth));
-        },
-        RESIZE_DEBOUNCE_THRESHOLD,
-      );
-
-      const resizeObserver = new ResizeObserver(debouncedResize);
-      resizeObserver.observe(wrapperElement);
+    return isAnvilLayout ? "100%" : `${props.canvasWidth}px`;
+  }, [isAnvilLayout, props.canvasWidth]);
 
-      return () => {
-        resizeObserver.unobserve(wrapperElement);
-      };
-    }
-  }, [dispatch, sidebarWidth]);
+  useDynamicAppLayout();
 
   useEffect(() => {
     AnalyticsUtil.logEvent("PAGE_LOAD", {
-      pageName: pageName,
-      pageId: pageId,
-      appName: appName,
+      pageName: props.pageName,
+      pageId: props.pageId,
+      appName: props.appName,
       mode: "VIEW",
     });
-  }, [appName, pageId, pageName]);
+  }, [props.pageId, props.pageName]);
 
   return (
     <PageViewWrapper
       hasPinnedSidebar={hasSidebarPinned}
       isPublished={isPublished}
-      ref={pageViewWrapperRef}
       sidebarWidth={sidebarWidth}
     >
       <PageView data-testid="t--app-viewer-page" width={width}>
-        {widgetsStructure.widgetId &&
-          renderAppsmithCanvas(widgetsStructure as WidgetProps)}
+        {props.widgetsStructure.widgetId &&
+          renderAppsmithCanvas(props.widgetsStructure as WidgetProps)}
       </PageView>
     </PageViewWrapper>
   );

app/client/src/pages/Editor/IDE/AppsmithIDE.test.tsx

@@ -22,7 +22,7 @@ import { UpdatedEditor } from "test/testMockedWidgets";
 import { act, fireEvent, render } from "test/testUtils";
 import { generateReactKey } from "utils/generators";
 import { getAbsolutePixels } from "utils/helpers";
-import * as useCanvasWidthAutoResize from "pages/Editor/WidgetsEditor/components/MainContainerWrapper";
+import * as useDynamicAppLayoutHook from "utils/hooks/useDynamicAppLayout";
 import * as widgetRenderUtils from "utils/widgetRenderUtils";
 import GlobalHotKeys from "../GlobalHotKeys";
 import * as uiSelectors from "selectors/ui";
@@ -106,7 +106,7 @@ describe("Drag and Drop widgets into Main container", () => {
     .spyOn(utilities, "computeMainContainerWidget")
     .mockImplementation((widget) => widget as any);
   jest
-    .spyOn(useCanvasWidthAutoResize, "useCanvasWidthAutoResize")
+    .spyOn(useDynamicAppLayoutHook, "useDynamicAppLayout")
     .mockImplementation(() => true);
 
   const pushState = jest.spyOn(window.history, "pushState");

app/client/src/pages/Editor/WidgetsEditor/components/MainContainerWrapper/MainContainerWrapper.tsx → app/client/src/pages/Editor/WidgetsEditor/components/MainContainerWrapper.tsx

@@ -1,5 +1,5 @@
 import type { ReactNode } from "react";
-import React, { useEffect, useRef } from "react";
+import React, { useEffect } from "react";
 import { useSelector } from "react-redux";
 
 import {
@@ -22,13 +22,13 @@ import {
   getSelectedAppTheme,
 } from "selectors/appThemingSelectors";
 import { getCanvasWidgetsStructure } from "@appsmith/selectors/entitiesSelector";
+import { useDynamicAppLayout } from "utils/hooks/useDynamicAppLayout";
 import Canvas from "pages/Editor/Canvas";
 import type { AppState } from "@appsmith/reducers";
 import { getIsAnonymousDataPopupVisible } from "selectors/onboardingSelectors";
 import { MainContainerResizer } from "layoutSystems/common/mainContainerResizer/MainContainerResizer";
 import { useMainContainerResizer } from "layoutSystems/common/mainContainerResizer/useMainContainerResizer";
 import { getIsAnvilLayout } from "layoutSystems/anvil/integrations/selectors";
-import { useCanvasWidthAutoResize } from "./hooks";
 
 interface MainCanvasWrapperProps {
   isPreviewMode: boolean;
@@ -107,7 +107,7 @@ const Wrapper = styled.section<{
  * @prop currentPageId, current page id in string
  * @returns
  */
-export function MainContainerWrapper(props: MainCanvasWrapperProps) {
+function MainContainerWrapper(props: MainCanvasWrapperProps) {
   const { isAppSettingsPaneWithNavigationTabOpen, navigationHeight } = props;
   const dispatch = useDispatch();
   const {
@@ -128,10 +128,8 @@ export function MainContainerWrapper(props: MainCanvasWrapperProps) {
   const isAppThemeChanging = useSelector(getAppThemeIsChanging);
   const showCanvasTopSection = useSelector(showCanvasTopSectionSelector);
   const showAnonymousDataPopup = useSelector(getIsAnonymousDataPopupVisible);
-
-  const wrapperRef = useRef<HTMLDivElement>(null);
-  const isCanvasInitialized = useCanvasWidthAutoResize(wrapperRef);
-  const isPageInitializing = isFetchingPage || !isCanvasInitialized;
+  const isLayoutingInitialized = useDynamicAppLayout();
+  const isPageInitializing = isFetchingPage || !isLayoutingInitialized;
   const { canShowResizer, enableMainContainerResizer } =
     useMainContainerResizer();
   const isAnvilLayout = useSelector(getIsAnvilLayout);
@@ -140,7 +138,7 @@ export function MainContainerWrapper(props: MainCanvasWrapperProps) {
     return () => {
       dispatch(forceOpenWidgetPanel(false));
     };
-  }, [dispatch]);
+  }, []);
 
   const fontFamily = `${selectedTheme.properties.fontFamily.appFont}, sans-serif`;
   const isAutoCanvasResizing = useSelector(
@@ -205,7 +203,6 @@ export function MainContainerWrapper(props: MainCanvasWrapperProps) {
         }
         isPreviewingNavigation={isPreviewingNavigation}
         navigationHeight={navigationHeight}
-        ref={wrapperRef}
         style={{
           height: isPreviewMode ? `calc(100% - ${navigationHeight})` : "auto",
           fontFamily: fontFamily,
@@ -235,3 +232,5 @@ export function MainContainerWrapper(props: MainCanvasWrapperProps) {
     </>
   );
 }
+
+export default MainContainerWrapper;

app/client/src/pages/Editor/WidgetsEditor/components/NavigationAdjustedPageViewer.tsx

@@ -8,7 +8,7 @@ import {
   combinedPreviewModeSelector,
   getCurrentApplication,
 } from "selectors/editorSelectors";
-import { PageViewWrapper } from "pages/AppViewer/AppPage";
+import { PageViewWrapper } from "pages/AppViewer/AppPage.styled";
 import classNames from "classnames";
 import { APP_MODE } from "entities/App";
 import { getAppMode } from "@appsmith/selectors/entitiesSelector";