Merge pull request #34424 from iamejaaz/list-view-height-fixes

fix: grid height overflow on y-axis

frappe/public/js/frappe/list/base_list.js

@@ -451,10 +451,9 @@ frappe.views.BaseList = class BaseList {
 	set_result_height() {
 		this.$result[0].style.removeProperty("height");
 		// place it at the footer of the page
+		let result_element_dom = this.$result[0].getBoundingClientRect();
 		const resultContainerHeight =
-			window.innerHeight -
-			this.$result.get(0).offsetTop -
-			this.$paging_area.get(0).offsetHeight;
+			window.innerHeight - this.$paging_area.get(0).offsetHeight - result_element_dom.top;
 		this.$result.parent(".result-container").css({
 			height: resultContainerHeight + "px",
 		});

frappe/public/js/frappe/list/list_view.js

@@ -804,11 +804,9 @@ frappe.views.ListView = class ListView extends frappe.views.BaseList {
 			}
 
 			if (frappe.is_mobile() && col.type == "Field" && [3, 4].includes(i)) {
-				left_html += `<div class="mobile-layout">${this.get_column_html(
-					col,
-					doc,
-					true
-				)}</div>`;
+				left_html += `<div class="mobile-layout ${
+					i == 3 ? "mobile-layout-seperator" : ""
+				}">${this.get_column_html(col, doc, true)}</div>`;
 			} else {
 				left_html += this.get_column_html(col, doc, false);
 			}

frappe/public/scss/desk/list.scss

@@ -649,7 +649,8 @@ input.list-header-checkbox {
 							padding-left: 37px;
 						}
 					}
-					.mobile-layout:not(.mobile-layout ~ .mobile-layout) {
+					.mobile-layout-seperator:not(.mobile-layout-seperator
+							~ .mobile-layout-seperator) {
 						padding-left: 27px;
 						margin-right: 6px;