Merge pull request #13119 from frappe/mergify/bp/version-13-hotfix/pr-12965

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">

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;
 		});
 

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;
 		});
 

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>

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)

frappe/public/scss/common/modal.scss

@@ -2,25 +2,50 @@ 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 {
+	// 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);
 	}
 	.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;
 			line-height: 2em;
 			font-size: $font-size-lg;
+			max-width: calc(100% - 80px);
 		}
 
 		.modal-actions {
@@ -60,9 +85,17 @@ body.modal-open {
 		}
 	}
 
+	.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 {

frappe/public/scss/desk/scrollbar.scss

@@ -9,11 +9,6 @@ html {
 }
 
 /* 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);
 }
 
+*::-webkit-scrollbar {
+	width: 6px;
+	height: 6px;
+}
+
 body::-webkit-scrollbar {
-	width: unset;
-	height: unset;
+	width: 12px;
+	height: 12px;
 }

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>