From 86d21b1ea1ee579f7f9b60a0b996c3b175fe5b97 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?nicole=20miko=C5=82ajczyk?= <git@mkljczk.pl>
Date: Fri, 23 Jan 2026 00:17:15 +0100
Subject: [PATCH] pl-fe: am i even fixing this
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>
---
 packages/pl-fe/src/modals/media-modal.tsx | 4 ++--
 packages/pl-fe/src/styles/new/layout.scss | 9 ++++++++-
 2 files changed, 10 insertions(+), 3 deletions(-)

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;
   }
 }