fix: property pane in preview mode (#38274)

## Description
Fixes an issue where property pane appeared in preview mode under
certain conditions.

Fixes [#37278](#37278)

## 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/12428449390>
> Commit: b61d77a
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=12428449390&attempt=2"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.All`
> Spec:
> <hr>Fri, 20 Dec 2024 10:28:59 UTC
<!-- end of auto-generated comment: Cypress test results  -->


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


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

- **New Features**
- Introduced a new `StaticLayout` component for improved layout
management.
  
- **Bug Fixes**
- Enhanced readability and consistency in defining column widths for
various editor states.

- **Chores**
- Updated imports and exports to replace the deprecated
`UnanimatedLayout` with `StaticLayout`.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

app/client/src/pages/Editor/IDE/Layout/UnanimatedLayout.tsx → app/client/src/pages/Editor/IDE/Layout/StaticLayout.tsx

@@ -22,9 +22,10 @@ const GridContainer = styled.div`
 const LayoutContainer = styled.div<{ name: string }>`
   position: relative;
   grid-area: ${(props) => props.name};
+  overflow: auto;
 `;
 
-function UnanimatedLayout() {
+export const StaticLayout = React.memo(() => {
   const isProtectedMode = useSelector(protectedModeSelector);
   const { areas, columns } = useGridLayoutTemplate();
 
@@ -60,8 +61,4 @@ function UnanimatedLayout() {
       <BottomBar />
     </>
   );
-}
-
-const MemoUanimatedLayout = React.memo(UnanimatedLayout);
-
-export { MemoUanimatedLayout as UnanimatedLayout };
+});

app/client/src/pages/Editor/IDE/Layout/hooks/useGridLayoutTemplate.ts

@@ -50,59 +50,38 @@ function useGridLayoutTemplate(): ReturnValue {
       switch (appState) {
         case EditorState.DATA:
           if (isPreviewMode || isProtectedMode) {
-            setColumns([
-              "0px",
-              "0px",
-              (windowWidth + "px") as AnimatedGridUnit,
-              "0px",
-            ]);
+            setColumns(["0px", "0px", `${windowWidth}px`, "0px"]);
           } else {
             setColumns([
               SIDEBAR_WIDTH,
               "300px",
-              (windowWidth - 300 - 50 + "px") as AnimatedGridUnit,
+              `${windowWidth - 300 - 50}px`,
               "0px",
             ]);
           }
 
           break;
         case EditorState.SETTINGS:
           if (isPreviewMode || isProtectedMode) {
-            setColumns([
-              "0px",
-              "0px",
-              (windowWidth + "px") as AnimatedGridUnit,
-              "0px",
-            ]);
+            setColumns(["0px", "0px", `${windowWidth}px`, "0px"]);
           } else {
             setColumns([
               SIDEBAR_WIDTH,
-              (APP_SETTINGS_PANE_WIDTH + "px") as AnimatedGridUnit,
-              (windowWidth -
-                APP_SIDEBAR_WIDTH -
-                APP_SETTINGS_PANE_WIDTH +
-                "px") as AnimatedGridUnit,
+              `${APP_SETTINGS_PANE_WIDTH}px`,
+              `${windowWidth - APP_SIDEBAR_WIDTH - APP_SETTINGS_PANE_WIDTH}px`,
               "0px",
             ]);
           }
 
           break;
         case EditorState.LIBRARIES:
           if (isPreviewMode || isProtectedMode) {
-            setColumns([
-              "0px",
-              "0px",
-              (windowWidth + "px") as AnimatedGridUnit,
-              "0px",
-            ]);
+            setColumns(["0px", "0px", `${windowWidth}px`, "0px"]);
           } else {
             setColumns([
               SIDEBAR_WIDTH,
               `${APP_LIBRARIES_PANE_WIDTH}px`,
-              (windowWidth -
-                APP_SIDEBAR_WIDTH -
-                APP_LIBRARIES_PANE_WIDTH +
-                "px") as AnimatedGridUnit,
+              `${windowWidth - APP_SIDEBAR_WIDTH - APP_LIBRARIES_PANE_WIDTH}px`,
               "0px",
             ]);
           }
@@ -112,40 +91,32 @@ function useGridLayoutTemplate(): ReturnValue {
           if (isPreviewMode || isProtectedMode) {
             setColumns([
               "0px",
-              (editorStateLeftPaneWidth + "px") as AnimatedGridUnit,
-              (windowWidth + "px") as AnimatedGridUnit,
+              `${editorStateLeftPaneWidth}px`,
+              `${windowWidth}px`,
               "0px",
             ]);
           } else if (segment !== EditorEntityTab.UI) {
             if (editorMode === EditorViewMode.SplitScreen) {
               setColumns([
                 SIDEBAR_WIDTH,
-                (editorStateLeftPaneWidth + "px") as AnimatedGridUnit,
-                (windowWidth -
-                  APP_SIDEBAR_WIDTH -
-                  editorStateLeftPaneWidth +
-                  "px") as AnimatedGridUnit,
+                `${editorStateLeftPaneWidth}px`,
+                `${windowWidth - APP_SIDEBAR_WIDTH - editorStateLeftPaneWidth}px`,
                 "0px",
               ]);
             } else {
               setColumns([
                 SIDEBAR_WIDTH,
-                (editorStateLeftPaneWidth + "px") as AnimatedGridUnit,
+                `${editorStateLeftPaneWidth}px`,
                 "0px",
                 "0px",
               ]);
             }
           } else {
             setColumns([
               SIDEBAR_WIDTH,
-              (editorStateLeftPaneWidth + "px") as AnimatedGridUnit,
-              (windowWidth -
-                APP_SIDEBAR_WIDTH -
-                editorStateLeftPaneWidth -
-                PropertyPaneWidth +
-                1 +
-                "px") as AnimatedGridUnit,
-              (PropertyPaneWidth + 1 + "px") as AnimatedGridUnit,
+              `${editorStateLeftPaneWidth}px`,
+              `${windowWidth - APP_SIDEBAR_WIDTH - editorStateLeftPaneWidth - PropertyPaneWidth + 1}px`,
+              `${PropertyPaneWidth + 1}px`,
             ]);
           }
       }

app/client/src/pages/Editor/IDE/Layout/index.ts

@@ -1,2 +1,2 @@
 export { AnimatedLayout } from "./AnimatedLayout";
-export { UnanimatedLayout } from "./UnanimatedLayout";
+export { StaticLayout } from "./StaticLayout";

app/client/src/pages/Editor/IDE/index.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { selectFeatureFlagCheck } from "ee/selectors/featureFlagsSelectors";
-import { AnimatedLayout, UnanimatedLayout } from "./Layout";
+import { AnimatedLayout, StaticLayout } from "./Layout";
 import { useSelector } from "react-redux";
 import type { AppState } from "ee/reducers";
 import { FEATURE_FLAG } from "ee/entities/FeatureFlag";
@@ -22,7 +22,7 @@ function IDE() {
     return <AnimatedLayout />;
   }
 
-  return <UnanimatedLayout />;
+  return <StaticLayout />;
 }
 
 IDE.displayName = "AppIDE";