diff --git a/app/client/cypress/fixtures/listwidgetdsl.json b/app/client/cypress/fixtures/listwidgetdsl.json
index f568a4c832..f34952103f 100644
--- a/app/client/cypress/fixtures/listwidgetdsl.json
+++ b/app/client/cypress/fixtures/listwidgetdsl.json
@@ -172,7 +172,7 @@
               "type": "LIST_WIDGET",
               "isLoading": false,
               "parentColumnSpace": 57.875,
-              "parentRowSpace": 40,
+              "parentRowSpace": 10,
               "leftColumn": 4,
               "rightColumn": 12,
               "topRow": 2,
diff --git a/app/client/src/entities/DataTree/dataTreeFactory.ts b/app/client/src/entities/DataTree/dataTreeFactory.ts
index 0e6cb98724..bd23613279 100644
--- a/app/client/src/entities/DataTree/dataTreeFactory.ts
+++ b/app/client/src/entities/DataTree/dataTreeFactory.ts
@@ -22,9 +22,7 @@ import type {
   WidgetConfig,
 } from "./types";
 import { ENTITY_TYPE, EvaluationSubstitutionType } from "./types";
-import { MAIN_CONTAINER_WIDGET_ID } from "constants/WidgetConstants";
-import { AppPositioningTypes } from "reducers/entityReducers/pageListReducer";
-import { Positioning } from "layoutSystems/autolayout/utils/constants";
+import type { AppPositioningTypes } from "reducers/entityReducers/pageListReducer";
 import type { LoadingEntitiesState } from "reducers/evaluationReducers/loadingEntitiesReducer";
 
 export type UnEvalTreeEntityObject =
@@ -82,6 +80,7 @@ type DataTreeSeed = {
   theme: AppTheme["properties"];
   metaWidgets: MetaWidgetsReduxState;
   isMobile: boolean;
+  appPositioningType: AppPositioningTypes;
   loadingEntities: LoadingEntitiesState;
 };
 
@@ -103,6 +102,7 @@ export class DataTreeFactory {
   static create({
     actions,
     appData,
+    appPositioningType,
     editorConfigs,
     isMobile,
     jsActions,
@@ -148,16 +148,12 @@ export class DataTreeFactory {
         widget,
         widgetsMeta[widget.metaWidgetId || widget.widgetId],
         loadingEntities,
+        appPositioningType,
+        isMobile,
       );
 
       dataTree[widget.widgetName] = unEvalEntity;
-      if (
-        widgets[MAIN_CONTAINER_WIDGET_ID].positioning === Positioning.Vertical
-      ) {
-        dataTree[widget.widgetName].appPositioningType =
-          AppPositioningTypes.AUTO;
-      }
-      dataTree[widget.widgetName].isMobile = isMobile;
+
       configTree[widget.widgetName] = configEntity;
     });
 
diff --git a/app/client/src/entities/DataTree/dataTreeWidget.test.ts b/app/client/src/entities/DataTree/dataTreeWidget.test.ts
index f6d94ee047..28fb87081d 100644
--- a/app/client/src/entities/DataTree/dataTreeWidget.test.ts
+++ b/app/client/src/entities/DataTree/dataTreeWidget.test.ts
@@ -227,6 +227,8 @@ describe("generateDataTreeWidget", () => {
       widgetId: "123",
       widgetName: "Input1",
       ENTITY_TYPE: ENTITY_TYPE.WIDGET,
+      componentWidth: 0,
+      componentHeight: 0,
       defaultText: "",
       type: "INPUT_WIDGET_V2",
       deepObj: {
diff --git a/app/client/src/entities/DataTree/dataTreeWidget.ts b/app/client/src/entities/DataTree/dataTreeWidget.ts
index 69a9df9647..b4544131f0 100644
--- a/app/client/src/entities/DataTree/dataTreeWidget.ts
+++ b/app/client/src/entities/DataTree/dataTreeWidget.ts
@@ -15,6 +15,8 @@ import { OverridingPropertyType } from "./types";
 import { setOverridingProperty } from "./utils";
 import { error } from "loglevel";
 import WidgetFactory from "WidgetProvider/factory";
+import { getComponentDimensions } from "layoutSystems/common/utils/ComponentSizeUtils";
+import { AppPositioningTypes } from "reducers/entityReducers/pageListReducer";
 import type { LoadingEntitiesState } from "reducers/evaluationReducers/loadingEntitiesReducer";
 
 /**
@@ -345,6 +347,8 @@ export const generateDataTreeWidget = (
   widget: FlattenedWidgetProps,
   widgetMetaProps: Record<string, unknown> = {},
   loadingEntities: LoadingEntitiesState,
+  appPositioningType: AppPositioningTypes = AppPositioningTypes.FIXED,
+  isMobile = false,
 ) => {
   const {
     dataTreeWidgetWithoutMetaProps: dataTreeWidget,
@@ -380,8 +384,19 @@ export const generateDataTreeWidget = (
   dataTreeWidget["meta"] = meta;
   dataTreeWidget["isLoading"] = loadingEntities.has(widget.widgetName);
 
+  const { componentHeight, componentWidth } = getComponentDimensions(
+    dataTreeWidget,
+    appPositioningType,
+    isMobile,
+  );
+
   return {
-    unEvalEntity: { ...dataTreeWidget, type: widget.type },
+    unEvalEntity: {
+      ...dataTreeWidget,
+      componentHeight,
+      componentWidth,
+      type: widget.type,
+    },
     configEntity: { ...entityConfig, widgetId: dataTreeWidget.widgetId },
   };
 };
diff --git a/app/client/src/layoutSystems/autolayout/index.ts b/app/client/src/layoutSystems/autolayout/index.ts
index 65b1069837..2917f145f1 100644
--- a/app/client/src/layoutSystems/autolayout/index.ts
+++ b/app/client/src/layoutSystems/autolayout/index.ts
@@ -4,6 +4,7 @@ import type { BaseWidgetProps } from "widgets/BaseWidgetHOC/withBaseWidgetHOC";
 import { RenderModes } from "../../constants/WidgetConstants";
 import { AutoLayoutEditorWrapper } from "./editor/AutoLayoutEditorWrapper";
 import { AutoLayoutViewerWrapper } from "./viewer/AutoLayoutViewerWrapper";
+import { getAutoLayoutComponentDimensions } from "layoutSystems/common/utils/ComponentSizeUtils";
 
 /**
  * getAutoLayoutDimensionsConfig
@@ -27,55 +28,6 @@ const getAutoLayoutDimensionsConfig = (props: BaseWidgetProps) => {
   return autoDimensionConfig;
 };
 
-/**
- * getAutoLayoutComponentDimensions
- *
- * utility function to compute a widgets dimensions in Auto layout system
- *
- * @returns
- *  @property {number} componentHeight The calculated height of a widget in pixels.
- *  @property {number} componentWidth The calculated width of a widget in pixels.
- */
-
-const getAutoLayoutComponentDimensions = ({
-  bottomRow,
-  isFlexChild,
-  isMobile,
-  leftColumn,
-  mobileBottomRow,
-  mobileLeftColumn,
-  mobileRightColumn,
-  mobileTopRow,
-  parentColumnSpace,
-  parentRowSpace,
-  rightColumn,
-  topRow,
-}: BaseWidgetProps) => {
-  let left = leftColumn;
-  let right = rightColumn;
-  let top = topRow;
-  let bottom = bottomRow;
-  if (isFlexChild && isMobile) {
-    if (mobileLeftColumn !== undefined && parentColumnSpace !== 1) {
-      left = mobileLeftColumn;
-    }
-    if (mobileRightColumn !== undefined && parentColumnSpace !== 1) {
-      right = mobileRightColumn;
-    }
-    if (mobileTopRow !== undefined && parentRowSpace !== 1) {
-      top = mobileTopRow;
-    }
-    if (mobileBottomRow !== undefined && parentRowSpace !== 1) {
-      bottom = mobileBottomRow;
-    }
-  }
-
-  return {
-    componentWidth: (right - left) * parentColumnSpace,
-    componentHeight: (bottom - top) * parentRowSpace,
-  };
-};
-
 /**
  * getAutoLayoutSystemPropsEnhancer
  *
diff --git a/app/client/src/layoutSystems/common/utils/ComponentSizeUtils.ts b/app/client/src/layoutSystems/common/utils/ComponentSizeUtils.ts
new file mode 100644
index 0000000000..569c3bbf41
--- /dev/null
+++ b/app/client/src/layoutSystems/common/utils/ComponentSizeUtils.ts
@@ -0,0 +1,96 @@
+import { GridDefaults } from "constants/WidgetConstants";
+import memo from "micro-memoize";
+import { AppPositioningTypes } from "reducers/entityReducers/pageListReducer";
+import type { BaseWidgetProps } from "widgets/BaseWidgetHOC/withBaseWidgetHOC";
+
+/**
+ * getAutoLayoutComponentDimensions
+ *
+ * utility function to compute a widgets dimensions in Auto layout system
+ *
+ * The Auto-Layout Layout system uses the mobile breakpoints for layouts.
+ * For this reason, the rows and columns occupied in the mobile breakpoint,
+ * and the rows and columns occupied in other viewport widths can be different.
+ * As a result, we check if we're in the mobile breakpoint using the isMobile,
+ * and use the appropriate leftColumn, rightColumn, topRow and bottomRow
+ * (with or without the mobile prefix depending on the isMobile value) to compute the component dimensions.
+ * The components here are the widgets.
+ *
+ */
+export const getAutoLayoutComponentDimensions = ({
+  bottomRow,
+  isMobile,
+  leftColumn,
+  mobileBottomRow,
+  mobileLeftColumn,
+  mobileRightColumn,
+  mobileTopRow,
+  parentColumnSpace,
+  parentRowSpace,
+  rightColumn,
+  topRow,
+}: BaseWidgetProps) => {
+  let left = leftColumn;
+  let right = rightColumn;
+  let top = topRow;
+  let bottom = bottomRow;
+  if (isMobile) {
+    if (mobileLeftColumn !== undefined && parentColumnSpace !== 1) {
+      left = mobileLeftColumn;
+    }
+    if (mobileRightColumn !== undefined && parentColumnSpace !== 1) {
+      right = mobileRightColumn;
+    }
+    if (mobileTopRow !== undefined && parentRowSpace !== 1) {
+      top = mobileTopRow;
+    }
+    if (mobileBottomRow !== undefined && parentRowSpace !== 1) {
+      bottom = mobileBottomRow;
+    }
+  }
+
+  return {
+    componentWidth: (right - left) * parentColumnSpace,
+    componentHeight: (bottom - top) * parentRowSpace,
+  };
+};
+
+/**
+ * getFixedLayoutComponentDimensions
+ *
+ * utility function to compute a widgets dimensions in Fixed layout system
+ *
+ */
+export const getFixedLayoutComponentDimensions = ({
+  bottomRow,
+  leftColumn,
+  parentColumnSpace,
+  parentRowSpace,
+  rightColumn,
+  topRow,
+}: BaseWidgetProps) => {
+  return {
+    componentWidth: (rightColumn - leftColumn) * parentColumnSpace,
+    componentHeight:
+      (bottomRow - topRow) *
+      (parentRowSpace || GridDefaults.DEFAULT_GRID_ROW_HEIGHT),
+  };
+};
+
+export const getComponentDimensions = memo(
+  (
+    props: BaseWidgetProps,
+    appPositioningType: AppPositioningTypes,
+    isMobile: boolean,
+  ): {
+    componentHeight: number;
+    componentWidth: number;
+  } => {
+    switch (appPositioningType) {
+      case AppPositioningTypes.AUTO:
+        return getAutoLayoutComponentDimensions({ ...props, isMobile });
+      default:
+        return getFixedLayoutComponentDimensions(props);
+    }
+  },
+);
diff --git a/app/client/src/layoutSystems/fixedlayout/index.ts b/app/client/src/layoutSystems/fixedlayout/index.ts
index 0c354bfa77..10d5d18ef5 100644
--- a/app/client/src/layoutSystems/fixedlayout/index.ts
+++ b/app/client/src/layoutSystems/fixedlayout/index.ts
@@ -2,26 +2,7 @@ import { RenderModes } from "constants/WidgetConstants";
 import { FixedLayoutEditorWrapper } from "./editor/FixedLayoutEditorWrapper";
 import { FixedLayoutViewerWrapper } from "./viewer/FixedLayoutViewerWrapper";
 import type { BaseWidgetProps } from "widgets/BaseWidgetHOC/withBaseWidgetHOC";
-
-/**
- * getFixedLayoutComponentDimensions
- *
- * utiltiy function to compute a widgets dimensions in Fixed layout system
- *
- */
-const getFixedLayoutComponentDimensions = ({
-  bottomRow,
-  leftColumn,
-  parentColumnSpace,
-  parentRowSpace,
-  rightColumn,
-  topRow,
-}: BaseWidgetProps) => {
-  return {
-    componentWidth: (rightColumn - leftColumn) * parentColumnSpace,
-    componentHeight: (bottomRow - topRow) * parentRowSpace,
-  };
-};
+import { getFixedLayoutComponentDimensions } from "layoutSystems/common/utils/ComponentSizeUtils";
 
 /**
  * getLabelWidth
@@ -35,7 +16,7 @@ const getLabelWidth = (props: BaseWidgetProps) => {
 /**
  * getFixedLayoutSystemPropsEnhancer
  *
- * utiltiy function to enhance BaseWidgetProps with Fixed Layout system specific props
+ * utility function to enhance BaseWidgetProps with Fixed Layout system specific props
  *
  */
 const getFixedLayoutSystemPropsEnhancer = (props: BaseWidgetProps) => {
@@ -54,7 +35,7 @@ const getFixedLayoutSystemPropsEnhancer = (props: BaseWidgetProps) => {
 /**
  * getFixedLayoutSystemWrapper
  *
- * utiltiy function to return the fixed layout system wrapper based on render mode.
+ * utility function to return the fixed layout system wrapper based on render mode.
  * wrapper is the component that wraps around a widget to provide layouting ability and enable editing experience.
  *
  */
@@ -69,8 +50,8 @@ const getFixedLayoutSystemWrapper = (renderMode: RenderModes) => {
 /**
  * getFixedLayoutSystem
  *
- * utiltiy function to return the fixed layout system config for
- * wrapper based on render mode and property enhancer funciton
+ * utility function to return the fixed layout system config for
+ * wrapper based on render mode and property enhancer function
  *
  */
 export function getFixedLayoutSystem(renderMode: RenderModes) {
diff --git a/app/client/src/layoutSystems/withLayoutSystemHOC.tsx b/app/client/src/layoutSystems/withLayoutSystemHOC.tsx
index de2deb7ab0..5051e195a3 100644
--- a/app/client/src/layoutSystems/withLayoutSystemHOC.tsx
+++ b/app/client/src/layoutSystems/withLayoutSystemHOC.tsx
@@ -15,7 +15,7 @@ export type LayoutSystem = {
   propertyEnhancer: (props: WidgetProps) => WidgetProps;
 };
 
-const getLayoutSystem = (
+export const getLayoutSystem = (
   renderMode: RenderModes,
   appPositioningType: AppPositioningTypes,
 ): LayoutSystem => {
diff --git a/app/client/src/selectors/dataTreeSelectors.ts b/app/client/src/selectors/dataTreeSelectors.ts
index efc25a0a57..87aebba024 100644
--- a/app/client/src/selectors/dataTreeSelectors.ts
+++ b/app/client/src/selectors/dataTreeSelectors.ts
@@ -9,7 +9,6 @@ import {
 import type { DataTree, WidgetEntity } from "entities/DataTree/dataTreeFactory";
 import { DataTreeFactory } from "entities/DataTree/dataTreeFactory";
 import {
-  getIsMobileBreakPoint,
   getMetaWidgets,
   getWidgetsForEval,
   getWidgetsMeta,
@@ -24,10 +23,27 @@ import type { EvaluationError } from "utils/DynamicBindingUtils";
 import { getEvalErrorPath } from "utils/DynamicBindingUtils";
 import ConfigTreeActions from "utils/configTree";
 import { DATATREE_INTERNAL_KEYWORDS } from "constants/WidgetValidation";
+import { AppPositioningTypes } from "reducers/entityReducers/pageListReducer";
 
 export const getLoadingEntities = (state: AppState) =>
   state.evaluations.loadingEntities;
 
+/**
+ * This selector is created to combine a couple of data points required by getUnevaluatedDataTree selector.
+ * Current version of reselect package only allows upto 12 arguments. Hence, this workaround.
+ * TODO: Figure out a better way to do this in a separate task. Or update the package if possible.
+ */
+const getLayoutSystemPayload = (state: AppState) => ({
+  // appPositioning?.type instead of appPositioning.type is for legacy applications that may not have the appPositioning object.
+  // All new applications will have appPositioning.type
+  appPositioningType:
+    AppPositioningTypes[
+      state.ui.applications.currentApplication?.applicationDetail
+        ?.appPositioning?.type || AppPositioningTypes.FIXED
+    ],
+  isMobile: state.ui.mainCanvas.isMobile,
+});
+
 export const getUnevaluatedDataTree = createSelector(
   getCurrentActions,
   getCurrentJSCollections,
@@ -39,7 +55,7 @@ export const getUnevaluatedDataTree = createSelector(
   getPluginDependencyConfig,
   getSelectedAppThemeProperties,
   getMetaWidgets,
-  getIsMobileBreakPoint,
+  getLayoutSystemPayload,
   getLoadingEntities,
   (
     actions,
@@ -52,7 +68,7 @@ export const getUnevaluatedDataTree = createSelector(
     pluginDependencyConfig,
     selectedAppThemeProperty,
     metaWidgets,
-    isMobile,
+    layoutSystemPayload,
     loadingEntities,
   ) => {
     const pageList = pageListPayload || [];
@@ -67,8 +83,8 @@ export const getUnevaluatedDataTree = createSelector(
       pluginDependencyConfig,
       theme: selectedAppThemeProperty,
       metaWidgets,
-      isMobile,
       loadingEntities,
+      ...layoutSystemPayload,
     });
   },
 );
diff --git a/app/client/src/selectors/editorSelectors.tsx b/app/client/src/selectors/editorSelectors.tsx
index 0a2e820ef5..458a8aa362 100644
--- a/app/client/src/selectors/editorSelectors.tsx
+++ b/app/client/src/selectors/editorSelectors.tsx
@@ -47,7 +47,6 @@ import {
 import { checkIsDropTarget } from "WidgetProvider/factory/helpers";
 import {
   buildChildWidgetTree,
-  buildFlattenedChildCanvasWidgets,
   createCanvasWidget,
   createLoadingWidget,
 } from "utils/widgetRenderUtils";
@@ -555,14 +554,6 @@ export const getChildWidgets = createSelector(
   buildChildWidgetTree,
 );
 
-export const getFlattenedChildCanvasWidgets = createSelector(
-  [
-    getCanvasWidgets,
-    (_state: AppState, parentWidgetId: string) => parentWidgetId,
-  ],
-  buildFlattenedChildCanvasWidgets,
-);
-
 const getOccupiedSpacesForContainer = (
   containerWidgetId: string,
   widgets: FlattenedWidgetProps[],
diff --git a/app/client/src/selectors/flattenedChildCanvasSelector.ts b/app/client/src/selectors/flattenedChildCanvasSelector.ts
new file mode 100644
index 0000000000..be1a6a09b1
--- /dev/null
+++ b/app/client/src/selectors/flattenedChildCanvasSelector.ts
@@ -0,0 +1,59 @@
+import { getCanvasWidgets } from "@appsmith/selectors/entitiesSelector";
+import { GridDefaults, type RenderModes } from "constants/WidgetConstants";
+import { getLayoutSystem } from "layoutSystems/withLayoutSystemHOC";
+import type {
+  CanvasWidgetsReduxState,
+  FlattenedWidgetProps,
+} from "reducers/entityReducers/canvasWidgetsReducer";
+import type { AppPositioningTypes } from "reducers/entityReducers/pageListReducer";
+import { createSelector } from "reselect";
+import { getAppPositioningType, getRenderMode } from "./editorSelectors";
+import { getIsMobileBreakPoint } from "sagas/selectors";
+import type { AppState } from "@appsmith/reducers";
+
+function buildFlattenedChildCanvasWidgets(
+  canvasWidgets: CanvasWidgetsReduxState,
+  renderMode: RenderModes,
+  appPositioningType: AppPositioningTypes,
+  isMobile: boolean,
+  parentWidgetId: string,
+  flattenedChildCanvasWidgets: Record<string, FlattenedWidgetProps> = {},
+) {
+  const parentWidget = canvasWidgets[parentWidgetId];
+  const { propertyEnhancer } = getLayoutSystem(renderMode, appPositioningType);
+  parentWidget?.children?.forEach((childId) => {
+    const childWidget = canvasWidgets[childId];
+    let parentRowSpace =
+      childWidget.parentRowSpace ?? GridDefaults.DEFAULT_GRID_ROW_HEIGHT;
+    if (childWidget.type === "CANVAS_WIDGET") {
+      parentRowSpace = 1;
+    }
+    flattenedChildCanvasWidgets[childId] = propertyEnhancer({
+      ...childWidget,
+      isMobile,
+      parentRowSpace,
+    });
+
+    buildFlattenedChildCanvasWidgets(
+      canvasWidgets,
+      renderMode,
+      appPositioningType,
+      isMobile,
+      childId,
+      flattenedChildCanvasWidgets,
+    );
+  });
+
+  return flattenedChildCanvasWidgets;
+}
+
+export const getFlattenedChildCanvasWidgets = createSelector(
+  [
+    getCanvasWidgets,
+    getRenderMode,
+    getAppPositioningType,
+    getIsMobileBreakPoint,
+    (_state: AppState, parentWidgetId: string) => parentWidgetId,
+  ],
+  buildFlattenedChildCanvasWidgets,
+);
diff --git a/app/client/src/utils/widgetRenderUtils.tsx b/app/client/src/utils/widgetRenderUtils.tsx
index bbf6e5b6d7..0f19bc9737 100644
--- a/app/client/src/utils/widgetRenderUtils.tsx
+++ b/app/client/src/utils/widgetRenderUtils.tsx
@@ -179,25 +179,6 @@ export function buildChildWidgetTree(
   return [];
 }
 
-export function buildFlattenedChildCanvasWidgets(
-  canvasWidgets: CanvasWidgetsReduxState,
-  parentWidgetId: string,
-  flattenedChildCanvasWidgets: Record<string, FlattenedWidgetProps> = {},
-) {
-  const parentWidget = canvasWidgets[parentWidgetId];
-  parentWidget?.children?.forEach((childId) => {
-    flattenedChildCanvasWidgets[childId] = canvasWidgets[childId];
-
-    buildFlattenedChildCanvasWidgets(
-      canvasWidgets,
-      childId,
-      flattenedChildCanvasWidgets,
-    );
-  });
-
-  return flattenedChildCanvasWidgets;
-}
-
 function getWidgetSpecificChildProps(type: string) {
   if (type === "FORM_WIDGET") {
     return ["value", "isDirty", "isValid", "isLoading", "children"];
diff --git a/app/client/src/widgets/ListWidget/widget/derived.js b/app/client/src/widgets/ListWidget/widget/derived.js
index e0e9d9b802..27e1e85b8b 100644
--- a/app/client/src/widgets/ListWidget/widget/derived.js
+++ b/app/client/src/widgets/ListWidget/widget/derived.js
@@ -139,8 +139,7 @@ export default {
 
     const templateBottomRow = props.templateBottomRow;
     const templateHeight = templateBottomRow * DEFAULT_GRID_ROW_HEIGHT;
-    const componentHeight =
-      (props.bottomRow - props.topRow) * DEFAULT_GRID_ROW_HEIGHT;
+    const componentHeight = props.componentHeight;
 
     const spaceAvailableWithoutPaginationControls =
       componentHeight - WIDGET_PADDING * 2;
diff --git a/app/client/src/widgets/ListWidget/widget/derived.test.js b/app/client/src/widgets/ListWidget/widget/derived.test.js
index c9d1bb7d4f..50e19af4e3 100644
--- a/app/client/src/widgets/ListWidget/widget/derived.test.js
+++ b/app/client/src/widgets/ListWidget/widget/derived.test.js
@@ -61,18 +61,21 @@ describe("Validates Derived Properties", () => {
       gridGap: 0,
       parentRowSpace: 10,
       topRow: 9,
+      componentHeight: 770,
       listData: [{}, {}],
     };
-    // decrease ListWidget height (bottomRow changes)
+    // decrease ListWidget height (bottomRow and componentHeight changes)
     const input2 = {
       ...input1,
       bottomRow: 56,
+      componentHeight: 470,
     };
 
-    // increase ListWidget height (bottomRow changes)
+    // increase ListWidget height (bottomRow and componentHeight changes)
     const input3 = {
       ...input1,
       bottomRow: 340,
+      componentHeight: 3310,
     };
 
     // increase ListItem height (templateBottomRow changes)
@@ -80,6 +83,7 @@ describe("Validates Derived Properties", () => {
       ...input1,
       templateBottomRow: DEFAULT_LIST_ITEM_HEIGHT * 2,
       bottomRow: 340,
+      componentHeight: 3310,
     };
 
     // undefined listData
diff --git a/app/client/src/widgets/ListWidgetV2/MetaWidgetGenerator.test.ts b/app/client/src/widgets/ListWidgetV2/MetaWidgetGenerator.test.ts
index 63d82afec6..c43ea86f6e 100644
--- a/app/client/src/widgets/ListWidgetV2/MetaWidgetGenerator.test.ts
+++ b/app/client/src/widgets/ListWidgetV2/MetaWidgetGenerator.test.ts
@@ -46,7 +46,7 @@ const DEFAULT_OPTIONS = {
   prevTemplateWidgets: {},
   primaryKeys: data.map((d) => d.id.toString()),
   scrollElement: null,
-  templateBottomRow: 12,
+  templateHeight: 120,
   widgetName: "List1",
   pageNo: 1,
   pageSize: 2,
@@ -611,10 +611,10 @@ describe("#generate", () => {
     expect(result.removedMetaWidgetIds.length).toEqual(0);
   });
 
-  it("doesn't re-generates meta widgets when templateBottomRow changes", () => {
+  it("doesn't re-generates meta widgets when templateHeight changes", () => {
     const { generator, options } = init();
 
-    options.templateBottomRow += 100;
+    options.templateHeight += 1000;
 
     const result = generator.withOptions(options).generate();
     const count = Object.keys(result.metaWidgets).length;
diff --git a/app/client/src/widgets/ListWidgetV2/MetaWidgetGenerator.ts b/app/client/src/widgets/ListWidgetV2/MetaWidgetGenerator.ts
index dd06f7e562..3c52019e8f 100644
--- a/app/client/src/widgets/ListWidgetV2/MetaWidgetGenerator.ts
+++ b/app/client/src/widgets/ListWidgetV2/MetaWidgetGenerator.ts
@@ -27,7 +27,7 @@ import type {
   MetaWidgetCacheProps,
   MetaWidgets,
 } from "./widget";
-import { DEFAULT_TEMPLATE_BOTTOM_ROW, DynamicPathType } from "./widget";
+import { DEFAULT_TEMPLATE_HEIGHT, DynamicPathType } from "./widget";
 import type { WidgetProps } from "widgets/BaseWidget";
 import type { DynamicPath } from "utils/DynamicBindingUtils";
 import {
@@ -90,7 +90,7 @@ export type GeneratorOptions = {
   primaryKeys?: string[];
   scrollElement: HTMLDivElement | null;
   serverSidePagination: boolean;
-  templateBottomRow: number;
+  templateHeight: number;
   widgetName: string;
 };
 
@@ -247,7 +247,7 @@ class MetaWidgetGenerator {
   private serverSidePagination: GeneratorOptions["serverSidePagination"];
   private setWidgetCache: ConstructorProps["setWidgetCache"];
   private setWidgetReferenceCache: ConstructorProps["setWidgetReferenceCache"];
-  private templateBottomRow: GeneratorOptions["templateBottomRow"];
+  private templateHeight: GeneratorOptions["templateHeight"];
   private templateWidgetCandidates: Set<string>;
   private templateWidgetStatus: TemplateWidgetStatus;
   private virtualizer?: VirtualizerInstance;
@@ -287,7 +287,7 @@ class MetaWidgetGenerator {
     this.scrollElement = null;
     this.setWidgetCache = props.setWidgetCache;
     this.setWidgetReferenceCache = props.setWidgetReferenceCache;
-    this.templateBottomRow = DEFAULT_TEMPLATE_BOTTOM_ROW;
+    this.templateHeight = DEFAULT_TEMPLATE_HEIGHT;
     this.templateWidgetCandidates = new Set();
     this.templateWidgetStatus = {
       added: new Set(),
@@ -310,7 +310,7 @@ class MetaWidgetGenerator {
     this.pageSize = options.pageSize;
     this.scrollElement = options.scrollElement;
     this.serverSidePagination = options.serverSidePagination;
-    this.templateBottomRow = options.templateBottomRow;
+    this.templateHeight = options.templateHeight;
     this.widgetName = options.widgetName;
     this.hooks = options.hooks;
     this.currTemplateWidgets = extractTillNestedListWidget(
@@ -1451,7 +1451,7 @@ class MetaWidgetGenerator {
       prevOptions?.infiniteScroll !== this.infiniteScroll ||
       prevOptions?.itemSpacing !== this.itemSpacing ||
       prevOptions?.serverSidePagination !== this.serverSidePagination ||
-      prevOptions?.templateBottomRow !== this.templateBottomRow ||
+      prevOptions?.templateHeight !== this.templateHeight ||
       !isEqual(this.currTemplateWidgets, this.prevTemplateWidgets) ||
       !isEqual(this.prevPrimaryKeys, this.primaryKeys)
     );
@@ -1932,7 +1932,7 @@ class MetaWidgetGenerator {
           const listCount = this.data?.length || 0;
           const itemSpacing =
             listCount && ((listCount - 1) * this.itemSpacing) / listCount;
-          return this.templateBottomRow * 10 + itemSpacing;
+          return this.templateHeight + itemSpacing;
         },
         getScrollElement: () => scrollElement,
         observeElementOffset,
diff --git a/app/client/src/widgets/ListWidgetV2/widget/defaultProps.ts b/app/client/src/widgets/ListWidgetV2/widget/defaultProps.ts
index 5ceaf08811..0bac70d9f6 100644
--- a/app/client/src/widgets/ListWidgetV2/widget/defaultProps.ts
+++ b/app/client/src/widgets/ListWidgetV2/widget/defaultProps.ts
@@ -83,7 +83,7 @@ export default {
     },
   },
   itemSpacing: 8,
-  templateBottomRow: 16,
+  templateHeight: 160,
   listData: DEFAULT_LIST_DATA,
   pageSize: DEFAULT_LIST_DATA.length,
   widgetName: "List",
diff --git a/app/client/src/widgets/ListWidgetV2/widget/index.tsx b/app/client/src/widgets/ListWidgetV2/widget/index.tsx
index cecee719cf..2380bb9b38 100644
--- a/app/client/src/widgets/ListWidgetV2/widget/index.tsx
+++ b/app/client/src/widgets/ListWidgetV2/widget/index.tsx
@@ -55,7 +55,7 @@ const getCurrentItemsViewBindingTemplate = () => ({
   suffix: "]}}",
 });
 
-export const DEFAULT_TEMPLATE_BOTTOM_ROW = 10;
+export const DEFAULT_TEMPLATE_HEIGHT = 100;
 
 export enum DynamicPathType {
   CURRENT_ITEM = "currentItem",
@@ -512,7 +512,7 @@ class ListWidget extends BaseWidget<
       prevTemplateWidgets: this.prevFlattenedChildCanvasWidgets,
       primaryKeys: this.primaryKeys,
       scrollElement: this.componentRef.current,
-      templateBottomRow: this.getTemplateBottomRow(),
+      templateHeight: this.getTemplateHeight(),
       widgetName: this.props.widgetName,
       pageNo,
       pageSize,
@@ -674,24 +674,15 @@ class ListWidget extends BaseWidget<
     return flattenedChildCanvasWidgets?.[mainContainerId];
   };
 
-  getTemplateBottomRow = () => {
-    if (
-      this.props.appPositioningType === AppPositioningTypes.AUTO &&
-      this.props.isMobile
-    ) {
-      return (
-        this.getMainContainer()?.mobileBottomRow || DEFAULT_TEMPLATE_BOTTOM_ROW
-      );
-    }
-    return this.getMainContainer()?.bottomRow || DEFAULT_TEMPLATE_BOTTOM_ROW;
+  getTemplateHeight = () => {
+    return this.getMainContainer()?.componentHeight || DEFAULT_TEMPLATE_HEIGHT;
   };
 
   getContainerRowHeight = () => {
-    const { itemSpacing = 0, listData, parentRowSpace } = this.props;
-    const templateBottomRow = this.getTemplateBottomRow();
+    const { itemSpacing = 0, listData } = this.props;
     const containerVerticalPadding = WIDGET_PADDING * 2;
     const itemsCount = (listData || []).length;
-    const templateHeight = templateBottomRow * parentRowSpace;
+    const templateHeight = this.getTemplateHeight();
 
     const averageItemSpacing = itemsCount
       ? (itemSpacing - containerVerticalPadding) *
@@ -1353,15 +1344,10 @@ class ListWidget extends BaseWidget<
 
   getWidgetView() {
     const { componentHeight, componentWidth } = this.props;
-    const {
-      infiniteScroll,
-      isLoading,
-      parentColumnSpace,
-      parentRowSpace,
-      selectedItemKey,
-    } = this.props;
+    const { infiniteScroll, isLoading, parentColumnSpace, selectedItemKey } =
+      this.props;
     const startIndex = this.metaWidgetGenerator.getStartIndex();
-    const templateHeight = this.getTemplateBottomRow() * parentRowSpace;
+    const templateHeight = this.getTemplateHeight();
 
     if (isLoading) {
       return (
diff --git a/app/client/src/widgets/TableWidget/widget/derived.js b/app/client/src/widgets/TableWidget/widget/derived.js
index 0627d58b63..58fd6d6f5c 100644
--- a/app/client/src/widgets/TableWidget/widget/derived.js
+++ b/app/client/src/widgets/TableWidget/widget/derived.js
@@ -92,8 +92,7 @@ export default {
       },
     };
     const compactMode = props.compactMode || "DEFAULT";
-    const componentHeight =
-      (props.bottomRow - props.topRow) * props.parentRowSpace - 10;
+    const componentHeight = props.componentHeight - 10;
     const tableSizes = TABLE_SIZES[compactMode];
     let pageSize = Math.floor(
       (componentHeight -
diff --git a/app/client/src/widgets/TableWidgetV2/widget/derived.js b/app/client/src/widgets/TableWidgetV2/widget/derived.js
index d3ae43eabb..2f2ed87ff8 100644
--- a/app/client/src/widgets/TableWidgetV2/widget/derived.js
+++ b/app/client/src/widgets/TableWidgetV2/widget/derived.js
@@ -178,12 +178,7 @@ export default {
       },
     };
     const compactMode = props.compactMode || "DEFAULT";
-    const componentHeight =
-      (props.appPositioningType === "AUTO" && props.isMobile
-        ? props.mobileBottomRow - props.mobileTopRow
-        : props.bottomRow - props.topRow) *
-        props.parentRowSpace -
-      10;
+    const componentHeight = props.componentHeight - 10;
     const tableSizes = TABLE_SIZES[compactMode];
 
     let pageSize =
diff --git a/app/client/src/widgets/withWidgetProps.tsx b/app/client/src/widgets/withWidgetProps.tsx
index 5b6fe9e4e5..69c9550aa2 100644
--- a/app/client/src/widgets/withWidgetProps.tsx
+++ b/app/client/src/widgets/withWidgetProps.tsx
@@ -24,7 +24,6 @@ import {
   getRenderMode,
   getMetaWidgetChildrenStructure,
   getMetaWidget,
-  getFlattenedChildCanvasWidgets,
   previewModeSelector,
   getIsAutoLayoutMobileBreakPoint,
   getCanvasWidth,
@@ -47,6 +46,7 @@ import { getGoogleMapsApiKey } from "@appsmith/selectors/tenantSelectors";
 import ConfigTreeActions from "utils/configTree";
 import { getSelectedWidgetAncestry } from "../selectors/widgetSelectors";
 import { getWidgetMinMaxDimensionsInPixel } from "layoutSystems/autolayout/utils/flexWidgetUtils";
+import { getFlattenedChildCanvasWidgets } from "selectors/flattenedChildCanvasSelector";
 
 const WIDGETS_WITH_CHILD_WIDGETS = ["LIST_WIDGET", "FORM_WIDGET"];
 const WIDGETS_REQUIRING_SELECTED_ANCESTRY = ["MODAL_WIDGET", "TABS_WIDGET"];