Workaround for inconsistent padding of modals. Occuring when document…

… uses multiple scrollbars and overlapping modals are used.

src/game/app/client/views/css/custom-bootstrap.css

@@ -139,6 +139,10 @@ button:focus {
 }
 /* end of new classes*/
 
+.modal-open .modal {
+  padding-right: 0 !important;
+}
+
 .modal-dialog {
   max-width: 31.25rem;
   margin: 1.75rem auto;

src/game/app/client/views/css/style.css

@@ -51,10 +51,6 @@ table {
   font-size: 1rem;
 }
 
-body.modal-open {
-  overflow: hidden;
-}
-
 input,
 textarea {
      -moz-user-select: text;

src/game/app/client/views/html/canvas.html

@@ -35,6 +35,19 @@
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
 
     <script src="https://cdn.jsdelivr.net/npm/@joeattardi/[email protected]/dist/index.min.js"></script>
+    <script>
+        /**
+         * When documents has scrollbars, then bootstrap adds padding to compensate scrollbar wideness.
+         * Nevertheless this mechanics behaviour is buggy when using overlapping modals.
+         * Bootstrap dev team explicitly say that they not support overlapping modals.
+         * Therefore this workaround is quite handy.*/
+        $(document).on('hidden.bs.modal', function () {
+            if($('.modal.show').length)
+            {
+                $('body').addClass('modal-open');
+            }
+        });
+    </script>
 
     <!--OTHER REQUIREMENTS-->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css" />