diff --git a/web/public/index.html b/web/public/index.html
index 99c4894dc..008438567 100644
--- a/web/public/index.html
+++ b/web/public/index.html
@@ -14,8 +14,8 @@
     <meta name="theme-color" content="#ff0000" />
   </head>
   <body>
-    <div id="root"></div>
-    <div id="menus"></div>
+    <div id="root" class="z-0"></div>
+    <div id="menus" class="z-0"></div>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <script type="module" src="/dist/index.js"></script>
   </body>
diff --git a/web/src/components/RelativeModal.jsx b/web/src/components/RelativeModal.jsx
index 5b7a41d8a..c1ce43fe9 100644
--- a/web/src/components/RelativeModal.jsx
+++ b/web/src/components/RelativeModal.jsx
@@ -59,7 +59,13 @@ export default function RelativeModal({ className, role = 'dialog', children, on
       if (top + menuHeight > windowHeight - WINDOW_PADDING) {
         top = y - menuHeight;
       }
-      setPosition({ left, top: top + window.scrollY, width });
+
+      if (top <= WINDOW_PADDING) {
+        top = WINDOW_PADDING;
+      }
+
+      const maxHeight = windowHeight - WINDOW_PADDING * 2 > menuHeight ? null : windowHeight - WINDOW_PADDING * 2;
+      setPosition({ left, top: top + window.scrollY, width, height: maxHeight });
       const focusable = ref.current.querySelector('[tabindex]');
       focusable && console.log('focusing');
       focusable && focusable.focus();
@@ -76,16 +82,20 @@ export default function RelativeModal({ className, role = 'dialog', children, on
 
   const menu = (
     <Fragment>
-      <div className="absolute inset-0" onClick={handleDismiss} />
+      <div className="absolute inset-0 z-10" onClick={handleDismiss} />
       <div
-        className={`z-10 bg-white dark:bg-gray-700 dark:text-white absolute shadow-lg rounded w-auto max-h-48 transition-all duration-75 transform scale-90 opacity-0 ${
+        className={`z-10 bg-white dark:bg-gray-700 dark:text-white absolute shadow-lg rounded w-auto h-auto transition-all duration-75 transform scale-90 opacity-0 overflow-scroll ${
           show ? 'scale-100 opacity-100' : ''
         } ${className}`}
         onkeydown={handleKeydown}
         role={role}
         ref={ref}
         style={
-          position.width > 0 ? `min-width: ${position.width}px; top: ${position.top}px; left: ${position.left}px` : ''
+          position.width > 0
+            ? `min-width: ${position.width}px; ${position.height ? `max-height: ${position.height}px;` : ''} top: ${
+                position.top
+              }px; left: ${position.left}px`
+            : ''
         }
       >
         {children}
