Fix modal edge cases (#813)

the HTML dialog element allows closing the modal by hitting ESC
key on the keyboard. Doing that was not removing the 'overflow-hidden'
class from document body, keeping the entire page "stuck" and not
scrolling.

Also fix sequence viewer modal with a lot of conent by adding scroll
and max height

public/css/app.css

@@ -2,6 +2,10 @@
 @tailwind components;
 @tailwind utilities;
 
+/* Stop the body scrolling while a modal is open */
+body:has(dialog[open]) {
+  overflow: hidden;
+}
 
 @layer base {
   html {
@@ -52,7 +56,7 @@ sup {
 /* Pre tag */
 pre.indL,
 pre.seqF {
-  @apply flex bg-[#f5f5f5] p-2.5 my-2.5 break-all break-words border border-[#ccc] text-[11px] text-[#333] md:text-[13px];
+  @apply bg-[#f5f5f5] p-2.5 my-2.5 break-all break-words border border-[#ccc] text-[11px] text-[#333] md:text-[13px];
 }
 
 pre.seqF {
@@ -71,7 +75,7 @@ pre.indL {
   @apply cursor-not-allowed pointer-events-none text-gray-400;
 }
 
-li:hover .download-fasta-of-selected:not(.disabled), 
+li:hover .download-fasta-of-selected:not(.disabled),
 li:hover .download-alignment-of-selected:not(.disabled) {
   @apply bg-gray-200 text-seqorange;
 }

public/js/cloud_share_modal.js

@@ -80,12 +80,10 @@ export default class CloudShareModal extends React.Component {
 
   show = () => {
     this.modalRef.current?.showModal();
-    document.body.classList.add("overflow-hidden");
   }
 
   hide = () => {
     this.modalRef.current?.close();
-    document.body.classList.remove("overflow-hidden");  
   }
 
   renderLoading() {

public/js/error_modal.js

@@ -17,15 +17,15 @@ export default class ErrorModal extends React.Component {
             errorData: {},
             isModalVisible: false
         };
-        this.modal = createRef();
+        this.modalRef = createRef();
     }
 
     render() {
         const { isModalVisible, errorData } = this.state;
 
         return (
             <div className="relative">
-                <dialog ref={this.modal} className="fixed p-4 w-full max-w-2xl bg-transparent focus:outline-none">
+                <dialog ref={this.modalRef} className="fixed p-4 w-full max-w-2xl bg-transparent focus:outline-none">
                     <div className="relative flex flex-col rounded-lg bg-white shadow">
                         <div className="flex items-start justify-between rounded-t border-b p-5">
                             <h3 className="text-xl font-medium text-gray-900">
@@ -58,16 +58,14 @@ export default class ErrorModal extends React.Component {
         // modal. This is helpful if the caller wants to finish some work
         // before showing error modal.
         setTimeout(() => {
-            this.modal.current?.showModal();
-            document.body.classList.add("overflow-hidden");
+            this.modalRef.current?.showModal();
         }, beforeShow || 0);
     }
 
     /**
      * Hide dialogue.
      */
     hide = () => {
-        this.modal.current?.close();
-        document.body.classList.remove("overflow-hidden");
+        this.modalRef.current?.close();
     }
 }

public/js/options.js

@@ -165,7 +165,6 @@ export class Options extends Component {
         }
 
         modal.showModal();
-        document.body.classList.add("overflow-hidden");
     }
 
     render() {

public/js/search.js

@@ -41,11 +41,12 @@ root.render(<Page />);
 
 document.addEventListener('DOMContentLoaded', () => {
     const closeButton = document.querySelector('button.advanced-modal-close');
-    const modal = document.querySelector('dialog.advanced-modal')
+    const modal = document.querySelector('dialog.advanced-modal');
+    modal.addEventListener('close', () => { document.body.classList.remove("overflow-hidden") });
+
     if (closeButton) {
         closeButton.addEventListener('click', function() {
             modal.close();
-            document.body.classList.add("overflow-hidden");
         });
     }
 });

public/js/sequence.js

@@ -1180,20 +1180,13 @@ require = (function e(t, n, r) { function s(o, u) { if (!n[o]) { if (!t[o]) { va
                     if (opt.numLeft) {
                         $('<pre/>')
                             .html(indL)
-                            .addClass('indL')
-                            .css({
-                                color: '#aaa',
-                                display: 'inline-block'
-                            })
+                            .addClass('indL hidden sm:inline-block')
                             .appendTo(this._contentDiv);
                     }
 
                     $('<pre/>')
                         .html(str)
-                        .addClass('seqF')
-                        .css({
-                            display: 'inline-block'
-                        })
+                        .addClass('seqF inline-block')
                         .appendTo(this._contentDiv);
 
                     if (opt.numRight) {

public/js/sequence_modal.js

@@ -35,7 +35,7 @@ export default class SequenceModal extends React.Component {
                 <i className="fa-solid fa-xmark hover:text-black"></i>
               </button>
             </div>
-            <div className="sequence-viewer-content">
+            <div className="sequence-viewer-content max-h-[80vh] overflow-y-scroll">
               {(requestCompleted && this.resultsJSX()) || this.loadingJSX()}
             </div>
           </div>
@@ -51,15 +51,13 @@ export default class SequenceModal extends React.Component {
     this.modalRef.current?.showModal();
     this.setState({ requestCompleted: false });
     this.loadJSON(url);
-    document.body.classList.add("overflow-hidden");
   }
 
   /**
    * Hide sequence viewer.
    */
   hide = () => {
     this.modalRef.current?.close();
-    document.body.classList.remove("overflow-hidden");
   }
 
   /**