feat: made changes to expose the App's height and width as part of the appsmith.ui state object (#41339)

## Description
Introducing this property as part of appsmith.ui state object, so that
it can be used in cases like passing to a custom widget which can help
in determining height of the widget with respective to the App's visible
height
Example of usage below:


https://github.com/user-attachments/assets/b19914f9-2248-453f-bbc8-a903f1034210

Additional Info: Controlling this by a feature flag only at the selector
level. Could not do it at the component level as one of the dispatch
action occurs from a class based component that does not support hooks
like useFeatureFlag

> [!TIP]  
> _Add a TL;DR when the description is longer than 500 words or
extremely technical (helps the content, marketing, and DevRel team)._
>
> _Please also include relevant motivation and context. List any
dependencies that are required for this change. Add links to Notion,
Figma or any other documents that might be relevant to the PR._


Fixes #`Issue Number`  
_or_  
Fixes `Issue URL`
> [!WARNING]  
> _If no issue exists, please create an issue first, and check with the
maintainers if the issue is valid._

## 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/19159166010>
> Commit: 134a977
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=19159166010&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.All`
> Spec:
> <hr>Fri, 07 Nov 2025 06:39:25 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**
  * Added viewport dimension tracking (height & width) across the app.
* Window dimensions are available in app state and exposed in the data
tree for use in responsive logic and bindings.
* Initial dimensions are captured on app load so widgets and pages can
react to current viewport size (feature guarded by a rollout flag).
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Author: tomjose92

app/client/src/actions/windowActions.ts

@@ -0,0 +1,6 @@
+import { ReduxActionTypes } from "ee/constants/ReduxActionConstants";
+
+export const updateWindowDimensions = (height: number, width: number) => ({
+  type: ReduxActionTypes.UPDATE_WINDOW_DIMENSIONS,
+  payload: { height, width },
+});

app/client/src/ce/constants/ReduxActionConstants.tsx

@@ -1235,6 +1235,10 @@ const AppThemeActionsTypes = {
   RESET_APP_THEME_SUCCESS: "RESET_APP_THEME_SUCCESS",
 };
 
+const WindowActionsTypes = {
+  UPDATE_WINDOW_DIMENSIONS: "UPDATE_WINDOW_DIMENSIONS",
+};
+
 const AppThemeActionErrorTypes = {
   FETCH_APP_THEMES_ERROR: "FETCH_APP_THEMES_ERROR",
   SET_DEFAULT_SELECTED_THEME_ERROR: "SET_DEFAULT_SELECTED_THEME_ERROR",
@@ -1326,6 +1330,7 @@ export const ReduxActionTypes = {
   ...AIActionTypes,
   ...ApplicationActionTypes,
   ...AppThemeActionsTypes,
+  ...WindowActionsTypes,
   ...AppViewActionTypes,
   ...AppSettingsActionTypes,
   ...BatchUpdateActionTypes,

app/client/src/ce/entities/FeatureFlag.ts

@@ -65,6 +65,7 @@ export const FEATURE_FLAG = {
   configure_block_event_tracking_for_anonymous_users:
     "configure_block_event_tracking_for_anonymous_users",
   release_static_url_enabled: "release_static_url_enabled",
+  release_window_dimensions_enabled: "release_window_dimensions_enabled",
 } as const;
 
 export type FeatureFlag = keyof typeof FEATURE_FLAG;
@@ -118,6 +119,7 @@ export const DEFAULT_FEATURE_FLAG_VALUE: FeatureFlags = {
   release_jsobjects_onpageunloadactions_enabled: false,
   configure_block_event_tracking_for_anonymous_users: false,
   release_static_url_enabled: false,
+  release_window_dimensions_enabled: false,
 };
 
 export const AB_TESTING_EVENT_KEYS = {

app/client/src/ce/reducers/index.tsx

@@ -48,6 +48,7 @@ import type { CrudInfoModalReduxState } from "reducers/uiReducers/crudInfoModalR
 import type { FormEvaluationState } from "reducers/evaluationReducers/formEvaluationReducer";
 import type { widgetReflow } from "reducers/uiReducers/reflowReducer";
 import type { AppThemingState } from "reducers/uiReducers/appThemingReducer";
+import type { WindowDimensionsState } from "reducers/uiReducers/windowReducer";
 import type { MainCanvasReduxState } from "ee/reducers/uiReducers/mainCanvasReducer";
 import type { SettingsReduxState } from "ee/reducers/settingsReducer";
 import SettingsReducer from "ee/reducers/settingsReducer";
@@ -147,6 +148,7 @@ export interface AppState {
     activeField: ActiveField;
     ide: IDEState;
     pluginActionEditor: PluginActionEditorState;
+    windowDimensions: WindowDimensionsState;
   };
   entities: {
     canvasWidgetsStructure: CanvasWidgetStructure;

app/client/src/ce/reducers/uiReducers/index.tsx

@@ -33,6 +33,7 @@ import crudInfoModalReducer from "reducers/uiReducers/crudInfoModalReducer";
 import { widgetReflowReducer } from "reducers/uiReducers/reflowReducer";
 import jsObjectNameReducer from "reducers/uiReducers/jsObjectNameReducer";
 import appThemingReducer from "reducers/uiReducers/appThemingReducer";
+import windowReducer from "reducers/uiReducers/windowReducer";
 import mainCanvasReducer from "ee/reducers/uiReducers/mainCanvasReducer";
 import focusHistoryReducer from "reducers/uiReducers/focusHistoryReducer";
 import { editorContextReducer } from "ee/reducers/uiReducers/editorContextReducer";
@@ -85,6 +86,7 @@ export const uiReducerObject = {
   crudInfoModal: crudInfoModalReducer,
   widgetReflow: widgetReflowReducer,
   appTheming: appThemingReducer,
+  windowDimensions: windowReducer,
   mainCanvas: mainCanvasReducer,
   appSettingsPane: appSettingsPaneReducer,
   focusHistory: focusHistoryReducer,

app/client/src/pages/AppIDE/AppIDE.tsx

@@ -38,6 +38,7 @@ import type { Page } from "entities/Page";
 import { IDE_HEADER_HEIGHT } from "@appsmith/ads";
 import { GitApplicationContextProvider } from "git-artifact-helpers/application/components";
 import { AppIDEModals } from "ee/pages/AppIDE/components/AppIDEModals";
+import { updateWindowDimensions } from "actions/windowActions";
 
 interface EditorProps {
   currentApplicationId?: string;
@@ -60,6 +61,7 @@ interface EditorProps {
   isMultiPane: boolean;
   widgetConfigBuildSuccess: () => void;
   pages: Page[];
+  updateWindowDimensions: (height: number, width: number) => void;
 }
 
 type Props = EditorProps & RouteComponentProps<BuilderRouteParams>;
@@ -86,6 +88,9 @@ class Editor extends Component<Props> {
     editorInitializer().then(() => {
       this.props.widgetConfigBuildSuccess();
     });
+
+    // Set initial window dimensions
+    this.props.updateWindowDimensions(window.innerHeight, window.innerWidth);
   }
 
   shouldComponentUpdate(nextProps: Props) {
@@ -274,6 +279,8 @@ const mapDispatchToProps = (dispatch: any) => {
     setupPage: (pageId: string) => dispatch(setupPageAction({ id: pageId })),
     updateCurrentPage: (pageId: string) => dispatch(updateCurrentPage(pageId)),
     widgetConfigBuildSuccess: () => dispatch(widgetInitialisationSuccess()),
+    updateWindowDimensions: (height: number, width: number) =>
+      dispatch(updateWindowDimensions(height, width)),
   };
 };
 

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

@@ -1,13 +1,14 @@
 import React, { useEffect, useMemo, useRef } from "react";
 import AnalyticsUtil from "ee/utils/AnalyticsUtil";
 import type { CanvasWidgetStructure } from "WidgetProvider/types";
-import { useSelector } from "react-redux";
+import { useSelector, useDispatch } from "react-redux";
 import { getAppMode } from "ee/selectors/applicationSelectors";
 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 { updateWindowDimensions } from "actions/windowActions";
 
 import { PageView, PageViewWrapper } from "./AppPage.styled";
 import { useCanvasWidthAutoResize } from "../../hooks/useCanvasWidthAutoResize";
@@ -24,6 +25,7 @@ export function AppPage(props: AppPageProps) {
   const { appName, basePageId, canvasWidth, pageName, widgetsStructure } =
     props;
 
+  const dispatch = useDispatch();
   const appMode = useSelector(getAppMode);
   const isPublished = appMode === APP_MODE.PUBLISHED;
   const isAnvilLayout = useSelector(getIsAnvilLayout);
@@ -46,6 +48,11 @@ export function AppPage(props: AppPageProps) {
     });
   }, [appName, basePageId, pageName]);
 
+  // Set initial window dimensions
+  useEffect(() => {
+    dispatch(updateWindowDimensions(window.innerHeight, window.innerWidth));
+  }, [dispatch]);
+
   return (
     <PageViewWrapper
       hasPinnedSidebar={hasSidebarPinned}

app/client/src/reducers/uiReducers/windowReducer.ts

@@ -0,0 +1,25 @@
+import { createImmerReducer } from "utils/ReducerUtils";
+import { ReduxActionTypes } from "ee/constants/ReduxActionConstants";
+import type { ReduxAction } from "actions/ReduxActionTypes";
+
+export interface WindowDimensionsState {
+  height: number;
+  width: number;
+}
+
+const initialState: WindowDimensionsState = {
+  height: typeof window !== "undefined" ? window.innerHeight : 0,
+  width: typeof window !== "undefined" ? window.innerWidth : 0,
+};
+
+const windowReducer = createImmerReducer(initialState, {
+  [ReduxActionTypes.UPDATE_WINDOW_DIMENSIONS]: (
+    state: WindowDimensionsState,
+    action: ReduxAction<{ height: number; width: number }>,
+  ) => {
+    state.height = action.payload.height;
+    state.width = action.payload.width;
+  },
+});
+
+export default windowReducer;

app/client/src/selectors/dataTreeSelectors.ts

@@ -28,6 +28,7 @@ import {
 import "url-search-params-polyfill";
 import type { DefaultRootState } from "react-redux";
 import { getSelectedAppThemeProperties } from "./appThemingSelectors";
+import { getWindowDimensions } from "./windowSelectors";
 import type { LoadingEntitiesState } from "reducers/evaluationReducers/loadingEntitiesReducer";
 import _, { get } from "lodash";
 import type { EvaluationError } from "utils/DynamicBindingUtils";
@@ -149,6 +150,7 @@ export const getUnevaluatedDataTree = createSelector(
   getMetaWidgetsFromUnevaluatedDataTree,
   getAppData,
   getSelectedAppThemeProperties,
+  getWindowDimensions,
   getCurrentAppWorkspace,
   getCurrentApplication,
   getCurrentPageName,
@@ -160,6 +162,7 @@ export const getUnevaluatedDataTree = createSelector(
     metaWidgets,
     appData,
     theme,
+    windowDimensions,
     currentWorkspace,
     currentApplication,
     getCurrentPageName,
@@ -182,12 +185,13 @@ export const getUnevaluatedDataTree = createSelector(
       // taking precedence in case the key is the same
       store: appData.store,
       theme,
+      ui: windowDimensions,
       currentPageName: getCurrentPageName,
       workspaceName: currentWorkspace.name,
       appName: currentApplication?.name,
       currentEnvironmentName,
+      ENTITY_TYPE: ENTITY_TYPE.APPSMITH,
     } as AppsmithEntity;
-    (dataTree.appsmith as AppsmithEntity).ENTITY_TYPE = ENTITY_TYPE.APPSMITH;
     dataTree = { ...dataTree, ...metaWidgets.dataTree };
     configTree = { ...configTree, ...metaWidgets.configTree };
 

app/client/src/selectors/windowSelectors.ts

@@ -0,0 +1,12 @@
+import type { DefaultRootState } from "react-redux";
+import { selectFeatureFlagCheck } from "ee/selectors/featureFlagsSelectors";
+import { FEATURE_FLAG } from "ee/entities/FeatureFlag";
+
+export const getWindowDimensions = (state: DefaultRootState) => {
+  const isWindowDimensionsEnabled = selectFeatureFlagCheck(
+    state,
+    FEATURE_FLAG.release_window_dimensions_enabled,
+  );
+
+  return isWindowDimensionsEnabled ? state.ui.windowDimensions : undefined;
+};