From 5a5203144de660a8628e080a7da4de10f804e244 Mon Sep 17 00:00:00 2001
From: Ganesh Pawar <pawarg256@gmail.com>
Date: Fri, 23 Sep 2022 20:22:55 +0530
Subject: [PATCH] modal: Make the modal content scrollable instead of the whole
 modal.

Earlier, if the content of the modal (apart from the header and footer)
overflowed, the whole modal would become scrollable which would hide
the modal header and footer on scrolling. This commit makes only
the modal content scrollable and keeps the modal header and
footer static.
---
 web/styles/dark_theme.css       | 4 ++++
 web/styles/modal.css            | 5 +++++
 web/templates/dialog_widget.hbs | 4 ++--
 3 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/web/styles/dark_theme.css b/web/styles/dark_theme.css
index f017d8fb10..026277a227 100644
--- a/web/styles/dark_theme.css
+++ b/web/styles/dark_theme.css
@@ -37,6 +37,10 @@
         background-color: hsla(0, 0%, 83%, 0.5);
     }
 
+    .modal__content.simplebar-scrollable-y + .modal__footer {
+        border-top: 1px solid hsla(0, 0%, 100%, 0.2);
+    }
+
     .modal-bg,
     .modal__container {
         background-color: hsl(212, 28%, 18%);
diff --git a/web/styles/modal.css b/web/styles/modal.css
index 1878dc270a..286c1e92c1 100644
--- a/web/styles/modal.css
+++ b/web/styles/modal.css
@@ -83,10 +83,15 @@
 }
 
 .modal__content {
+    display: flex;
     font-size: 1rem;
     overflow-y: auto;
     padding: 0 24px;
     line-height: 1.5;
+
+    &.simplebar-scrollable-y + .modal__footer {
+        border-top: 1px solid hsl(0, 0%, 87%);
+    }
 }
 
 .modal__btn {
diff --git a/web/templates/dialog_widget.hbs b/web/templates/dialog_widget.hbs
index 85e352a384..e7c8268879 100644
--- a/web/templates/dialog_widget.hbs
+++ b/web/templates/dialog_widget.hbs
@@ -1,6 +1,6 @@
 <div class="micromodal" id="dialog_widget_modal" aria-hidden="true">
     <div class="modal__overlay" tabindex="-1">
-        <div {{#if id}}id="{{id}}" {{/if}}class="modal__container" role="dialog" aria-modal="true" aria-labelledby="dialog_title" data-simplebar>
+        <div {{#if id}}id="{{id}}" {{/if}}class="modal__container" role="dialog" aria-modal="true" aria-labelledby="dialog_title">
             <header class="modal__header">
                 <h1 class="modal__title dialog_heading">
                     {{{ heading_text }}}
@@ -10,7 +10,7 @@
                 </h1>
                 <button class="modal__close" aria-label="{{t 'Close modal' }}" data-micromodal-close></button>
             </header>
-            <main class="modal__content">
+            <main class="modal__content" data-simplebar>
                 <div class="alert" id="dialog_error"></div>
                 {{{ html_body }}}
             </main>