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

@@ -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%);

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 {

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>