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] 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 {