diff --git a/packages/web/src/javascripts/Components/Popover/PositionedPopoverContent.tsx b/packages/web/src/javascripts/Components/Popover/PositionedPopoverContent.tsx
index 31768f6ba..7c428e835 100644
--- a/packages/web/src/javascripts/Components/Popover/PositionedPopoverContent.tsx
+++ b/packages/web/src/javascripts/Components/Popover/PositionedPopoverContent.tsx
@@ -58,7 +58,7 @@ const PositionedPopoverContent = ({
     <Portal>
       <div
         className={classNames(
-          'absolute top-0 left-0 flex h-full w-full min-w-80 cursor-auto flex-col overflow-y-auto rounded bg-default shadow-main md:h-auto md:max-w-xs',
+          'absolute top-0 left-0 flex h-screen w-full min-w-80 cursor-auto flex-col overflow-y-auto rounded bg-default shadow-main md:h-auto md:max-w-xs',
           overrideZIndex ? overrideZIndex : 'z-dropdown-menu',
           !isDesktopScreen ? 'pt-safe-top pb-safe-bottom' : '',
           !styles && 'md:invisible',
diff --git a/packages/web/src/stylesheets/_modals.scss b/packages/web/src/stylesheets/_modals.scss
index fdf40b711..34dbdf5d0 100644
--- a/packages/web/src/stylesheets/_modals.scss
+++ b/packages/web/src/stylesheets/_modals.scss
@@ -45,7 +45,7 @@
   bottom: 0;
   z-index: var(--z-index-modal);
   width: 100%;
-  height: 100%;
+  height: var(--viewport-height, 100vh);
 
   padding-left: 1rem;
   padding-right: 1rem;