diff --git a/src/content/mytinytodo.js b/src/content/mytinytodo.js
index ebd9082..1638d3e 100644
--- a/src/content/mytinytodo.js
+++ b/src/content/mytinytodo.js
@@ -2821,6 +2821,7 @@ function mttModalDialog(dialogType = 'alert')
 
     this.close = function() {
         $("#modal_overlay, #modal").hide();
+        $('html').css('overflow-y', '');
         $("#btnModalOk").off('click');
         $("#btnModalCancel").off('click');
         $("#modalMessage").text('');
@@ -2858,11 +2859,12 @@ function mttModalDialog(dialogType = 'alert')
     }
 
     this.show = function() {
+        $('html').css('overflow-y', 'hidden'); // disable scrolling
         var modalOverlay = document.getElementById("modal_overlay");
         if (!modalOverlay) {
             modalOverlay = document.createElement("div");
             modalOverlay.id = "modal_overlay";
-            modalOverlay.style.cssText = "position: absolute; z-index: 999; left: 0; top: 0; width: 100%; height: 100%; background-color: black; opacity: 0.8; display:none;";
+            modalOverlay.style.cssText = "position: fixed; z-index: 999; left: 0; top: 0; width: 100%; height: 100%; background-color: black; opacity: 0.8; display:none;";
             document.getElementsByTagName('body')[0].appendChild(modalOverlay);
         }
 
diff --git a/src/content/theme/style.css b/src/content/theme/style.css
index 08cf74f..7a148b9 100644
--- a/src/content/theme/style.css
+++ b/src/content/theme/style.css
@@ -103,7 +103,7 @@
 
 html {
   height:100%;
-  overflow-y:hidden; /* for modal overlay */
+  /*overflow-y:hidden; /* for modal overlay to not hide body scrollbar */
   font-size:14px; /* =1rem */
 }
 body {
@@ -985,7 +985,7 @@ li.mtt-item-hidden { display:none; }
 }
 
 #modal {
-  position: absolute;
+  position: fixed;
   z-index: 1000;
   left: 50%;
   top: 50%;
@@ -1125,6 +1125,7 @@ li.mtt-item-hidden { display:none; }
   }
 
   #modal {
+    min-width: auto;
     width: 90%;
   }