From 30d085f0b976981fbeb682e87efad7e3a366c532 Mon Sep 17 00:00:00 2001
From: Sagar Vora <sagar@resilient.tech>
Date: Thu, 22 Apr 2021 16:44:59 +0530
Subject: [PATCH 1/4] fix(UI): dont disable dialog scroll on focusing a
 Link/Autocomplete field

(cherry picked from commit cf42986d8873e61238827e84bef7c74df12d5a3e)
---
 .../public/js/frappe/form/controls/autocomplete.js   |  6 ------
 frappe/public/js/frappe/form/controls/link.js        |  6 ------
 frappe/public/js/frappe/ui/filters/field_select.js   | 12 ------------
 3 files changed, 24 deletions(-)

diff --git a/frappe/public/js/frappe/form/controls/autocomplete.js b/frappe/public/js/frappe/form/controls/autocomplete.js
index 30eb277f08..7b5680f394 100644
--- a/frappe/public/js/frappe/form/controls/autocomplete.js
+++ b/frappe/public/js/frappe/form/controls/autocomplete.js
@@ -90,16 +90,10 @@ frappe.ui.form.ControlAutocomplete = frappe.ui.form.ControlData.extend({
 		});
 
 		this.$input.on("awesomplete-open", () => {
-			this.toggle_container_scroll('.modal-dialog', 'modal-dialog-scrollable');
-			this.toggle_container_scroll('.grid-form-body .form-area', 'scrollable');
-
 			this.autocomplete_open = true;
 		});
 
 		this.$input.on("awesomplete-close", () => {
-			this.toggle_container_scroll('.modal-dialog', 'modal-dialog-scrollable', true);
-			this.toggle_container_scroll('.grid-form-body .form-area', 'scrollable', true);
-
 			this.autocomplete_open = false;
 		});
 
diff --git a/frappe/public/js/frappe/form/controls/link.js b/frappe/public/js/frappe/form/controls/link.js
index c0ff128088..c32c99f0ed 100644
--- a/frappe/public/js/frappe/form/controls/link.js
+++ b/frappe/public/js/frappe/form/controls/link.js
@@ -241,16 +241,10 @@ frappe.ui.form.ControlLink = frappe.ui.form.ControlData.extend({
 		});
 
 		this.$input.on("awesomplete-open", () => {
-			this.toggle_container_scroll('.modal-dialog', 'modal-dialog-scrollable');
-			this.toggle_container_scroll('.grid-form-body .form-area', 'scrollable');
-
 			this.autocomplete_open = true;
 		});
 
 		this.$input.on("awesomplete-close", () => {
-			this.toggle_container_scroll('.modal-dialog', 'modal-dialog-scrollable', true);
-			this.toggle_container_scroll('.grid-form-body .form-area', 'scrollable', true);
-
 			this.autocomplete_open = false;
 		});
 
diff --git a/frappe/public/js/frappe/ui/filters/field_select.js b/frappe/public/js/frappe/ui/filters/field_select.js
index c362214ce2..ed271a73aa 100644
--- a/frappe/public/js/frappe/ui/filters/field_select.js
+++ b/frappe/public/js/frappe/ui/filters/field_select.js
@@ -36,18 +36,6 @@ frappe.ui.FieldSelect = Class.extend({
 			var item = me.awesomplete.get_item(value);
 			me.$input.val(item.label);
 		});
-		this.$input.on("awesomplete-open", () => {
-			let modal = this.$input.parents('.modal-dialog')[0];
-			if (modal) {
-				$(modal).removeClass("modal-dialog-scrollable");
-			}
-		});
-		this.$input.on("awesomplete-close", () => {
-			let modal = this.$input.parents('.modal-dialog')[0];
-			if (modal) {
-				$(modal).addClass("modal-dialog-scrollable");
-			}
-		});
 
 		if(this.filter_fields) {
 			for(var i in this.filter_fields)

From 49faecc354e7c175b4483225e830d4a580137142 Mon Sep 17 00:00:00 2001
From: Sagar Vora <sagar@resilient.tech>
Date: Wed, 28 Apr 2021 22:50:12 +0530
Subject: [PATCH 2/4] fix: remove scrollable behavior

(cherry picked from commit d6a3621650019d553d8c0a4076592f7cbcb71e3f)
---
 frappe/public/js/frappe/dom.js                |  2 +-
 frappe/public/js/frappe/form/grid_row_form.js |  2 +-
 frappe/public/scss/common/modal.scss          | 12 ++++++++----
 frappe/public/scss/desk/scrollbar.scss        | 18 +++++++++---------
 frappe/website/js/bootstrap-4.js              |  2 +-
 5 files changed, 20 insertions(+), 16 deletions(-)

diff --git a/frappe/public/js/frappe/dom.js b/frappe/public/js/frappe/dom.js
index db9407ed53..2769e9061d 100644
--- a/frappe/public/js/frappe/dom.js
+++ b/frappe/public/js/frappe/dom.js
@@ -319,7 +319,7 @@ frappe.get_data_pill = (label, target_id=null, remove_action=null, image=null) =
 
 frappe.get_modal = function(title, content) {
 	return $(`<div class="modal fade" style="overflow: auto;" tabindex="-1">
-		<div class="modal-dialog modal-dialog-scrollable">
+		<div class="modal-dialog">
 			<div class="modal-content">
 				<div class="modal-header">
 					<div class="fill-width flex title-section">
diff --git a/frappe/public/js/frappe/form/grid_row_form.js b/frappe/public/js/frappe/form/grid_row_form.js
index f5a4af206f..73131a00ae 100644
--- a/frappe/public/js/frappe/form/grid_row_form.js
+++ b/frappe/public/js/frappe/form/grid_row_form.js
@@ -66,7 +66,7 @@ export default class GridRowForm {
 				</div>
 			</div>
 			<div class="grid-form-body">
-				<div class="form-area scrollable"></div>
+				<div class="form-area"></div>
 				<div class="grid-footer-toolbar hidden-xs flex justify-between">
 					<div class="grid-shortcuts">
 						<span> ${frappe.utils.icon("keyboard", "md")} </span>
diff --git a/frappe/public/scss/common/modal.scss b/frappe/public/scss/common/modal.scss
index eec4f868ca..5d47d7af24 100644
--- a/frappe/public/scss/common/modal.scss
+++ b/frappe/public/scss/common/modal.scss
@@ -2,10 +2,14 @@ h5.modal-title {
 	margin: 0px !important;
 }
 
-body.modal-open {
-	overflow: auto;
-	height: auto;
-	min-height: 100%;
+// Hack to fix incorrect padding applied by Bootstrap
+body.modal-open[style^="padding-right"] {
+	padding-right: 12px !important;
+
+	header.navbar {
+		padding-right: 12px !important;
+		margin-right: -12px !important;
+	}
 }
 
 .modal {
diff --git a/frappe/public/scss/desk/scrollbar.scss b/frappe/public/scss/desk/scrollbar.scss
index 806ffd13eb..ea6388d567 100644
--- a/frappe/public/scss/desk/scrollbar.scss
+++ b/frappe/public/scss/desk/scrollbar.scss
@@ -4,16 +4,11 @@
 	scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color);
 }
 
-html {
+html, .modal {
 	scrollbar-width: auto;
 }
 
 /* Works on Chrome, Edge, and Safari */
-*::-webkit-scrollbar {
-	width: 6px;
-	height: 6px;
-}
-
 *::-webkit-scrollbar-thumb {
 	background: var(--scrollbar-thumb-color);
 }
@@ -23,7 +18,12 @@ html {
 	background: var(--scrollbar-track-color);
 }
 
-body::-webkit-scrollbar {
-	width: unset;
-	height: unset;
+*::-webkit-scrollbar {
+	width: 6px;
+	height: 6px;
+}
+
+body::-webkit-scrollbar, .modal::-webkit-scrollbar {
+	width: 12px;
+	height: 12px;
 }
diff --git a/frappe/website/js/bootstrap-4.js b/frappe/website/js/bootstrap-4.js
index c12919c570..e594c4d362 100644
--- a/frappe/website/js/bootstrap-4.js
+++ b/frappe/website/js/bootstrap-4.js
@@ -21,7 +21,7 @@ $('.dropdown-menu a.dropdown-toggle').on('click', function (e) {
 frappe.get_modal = function (title, content) {
 	return $(
 		`<div class="modal" tabindex="-1" role="dialog">
-			<div class="modal-dialog modal-dialog-scrollable" role="document">
+			<div class="modal-dialog" role="document">
 				<div class="modal-content">
 					<div class="modal-header">
 						<h5 class="modal-title">${title}</h5>

From 667e33dc3fea498150703cb4abf616fdca9e0dfe Mon Sep 17 00:00:00 2001
From: Sagar Vora <sagar@resilient.tech>
Date: Mon, 3 May 2021 12:19:56 +0530
Subject: [PATCH 3/4] fix: sticky header and footer for accessibility

(cherry picked from commit 17e1d03a4713cafc1a5ee930edefa70680492722)
---
 frappe/public/scss/common/modal.scss | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/frappe/public/scss/common/modal.scss b/frappe/public/scss/common/modal.scss
index 5d47d7af24..797509a466 100644
--- a/frappe/public/scss/common/modal.scss
+++ b/frappe/public/scss/common/modal.scss
@@ -17,9 +17,13 @@ body.modal-open[style^="padding-right"] {
 		border-color: var(--border-color);
 	}
 	.modal-header {
+		position: sticky;
+		top: 0;
+		z-index: 3;
+		background: inherit;
 		padding: var(--padding-md) var(--padding-lg);
-		padding-bottom: 0;
-		border-bottom: 0;
+		// padding-bottom: 0;
+		border-bottom: 1px solid var(--border-color);
 
 		.modal-title {
 			font-weight: 500;
@@ -64,9 +68,17 @@ body.modal-open[style^="padding-right"] {
 		}
 	}
 
+	.awesomplete ul {
+		z-index: 2;
+	}
+
 	.modal-footer {
+		position: sticky;
+		bottom: 0;
+		z-index: 1;
+		background: inherit;
 		padding: var(--padding-md) var(--padding-lg);
-		border-top: 0;
+		border-top: 1px solid var(--border-color);
 		justify-content: space-between;
 
 		button {

From 993ed39d2f0d5626f431a09d10e987263e2d437a Mon Sep 17 00:00:00 2001
From: Sagar Vora <sagar@resilient.tech>
Date: Mon, 3 May 2021 16:03:03 +0530
Subject: [PATCH 4/4] fix: hide scrollbar on touch devices

(cherry picked from commit ed2ca985029021dbb632534cbf32d8fc7a7a1e5d)
---
 frappe/public/scss/common/modal.scss   | 17 +++++++++++++++++
 frappe/public/scss/desk/scrollbar.scss |  4 ++--
 2 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/frappe/public/scss/common/modal.scss b/frappe/public/scss/common/modal.scss
index 797509a466..19975610e2 100644
--- a/frappe/public/scss/common/modal.scss
+++ b/frappe/public/scss/common/modal.scss
@@ -13,6 +13,22 @@ body.modal-open[style^="padding-right"] {
 }
 
 .modal {
+	// Same scrollbar as body
+	scrollbar-width: auto;
+	&::-webkit-scrollbar {
+		width: 12px;
+		height: 12px;
+	}
+
+	// Hide scrollbar on touch devices
+	@media(max-width: 991px) {
+		scrollbar-width: none;
+		&::-webkit-scrollbar {
+			width: 0;
+			height: 0;
+		}
+	}
+
 	.modal-content {
 		border-color: var(--border-color);
 	}
@@ -29,6 +45,7 @@ body.modal-open[style^="padding-right"] {
 			font-weight: 500;
 			line-height: 2em;
 			font-size: $font-size-lg;
+			max-width: calc(100% - 80px);
 		}
 
 		.modal-actions {
diff --git a/frappe/public/scss/desk/scrollbar.scss b/frappe/public/scss/desk/scrollbar.scss
index ea6388d567..d8fb49e5ce 100644
--- a/frappe/public/scss/desk/scrollbar.scss
+++ b/frappe/public/scss/desk/scrollbar.scss
@@ -4,7 +4,7 @@
 	scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color);
 }
 
-html, .modal {
+html {
 	scrollbar-width: auto;
 }
 
@@ -23,7 +23,7 @@ html, .modal {
 	height: 6px;
 }
 
-body::-webkit-scrollbar, .modal::-webkit-scrollbar {
+body::-webkit-scrollbar {
 	width: 12px;
 	height: 12px;
 }