diff --git a/packages/pl-fe/src/modals/media-modal.tsx b/packages/pl-fe/src/modals/media-modal.tsx
index 87e62a6de..8c71b1ff5 100644
--- a/packages/pl-fe/src/modals/media-modal.tsx
+++ b/packages/pl-fe/src/modals/media-modal.tsx
@@ -289,9 +289,10 @@ const MediaModal: React.FC<MediaModalProps & BaseModalProps> = (props) => {
         role='presentation'
       >
         <Stack
+          {...bind()}
           onClick={handleClickOutside}
           className={
-            clsx('⁂-media-modal__content fixed inset-0 h-full grow transition-all', {
+            clsx('⁂-media-modal__content fixed inset-0 h-full grow touch-pan-y transition-all', {
               'xl:pr-96': !isFullScreen,
               'xl:pr-0': isFullScreen,
             })
@@ -349,7 +350,6 @@ const MediaModal: React.FC<MediaModalProps & BaseModalProps> = (props) => {
 
           {/* Height based on height of top/bottom bars */}
           <div
-            {...bind()}
             className='relative h-[calc(100vh-120px)] w-full grow'
           >
             {hasMultipleImages && (
diff --git a/packages/pl-fe/src/styles/new/layout.scss b/packages/pl-fe/src/styles/new/layout.scss
index 383eb21eb..37180d50b 100644
--- a/packages/pl-fe/src/styles/new/layout.scss
+++ b/packages/pl-fe/src/styles/new/layout.scss
@@ -7,6 +7,13 @@ html {
   --font-mono: 'Roboto Mono', ui-monospace, monospace;
 }
 
+html:has(body.with-modals),
+body.with-modals {
+  touch-action: none;
+  overscroll-behavior: none;
+  scrollbar-gutter: stable;
+}
+
 body {
   @apply bg-white text-base antialiased black:bg-black dark:bg-gray-800;
   height: 100%;
@@ -21,7 +28,7 @@ body {
   }
 
   &.with-modals {
-    @apply overflow-hidden;
+    overflow: hidden;
   }
 }