From 3709b99d334619fcba4f715cb7ddfa3fd2848a2b Mon Sep 17 00:00:00 2001
From: thornbill <thornbill@users.noreply.github.com>
Date: Sat, 7 Sep 2024 18:07:36 -0400
Subject: [PATCH] Backport pull request #6015 from jellyfin-web/release-10.9.z

Fix touch events in experimental video player

Original-merge: 6b1352a8559d6481555e6b352fba8e6f342e3872

Merged-by: thornbill <thornbill@users.noreply.github.com>

Backported-by: Joshua M. Boniface <joshua@boniface.me>
---
 src/apps/experimental/AppLayout.tsx     | 2 +-
 src/apps/experimental/AppOverrides.scss | 4 ++++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/apps/experimental/AppLayout.tsx b/src/apps/experimental/AppLayout.tsx
index 8e8b59b7f1..c8dde41cbb 100644
--- a/src/apps/experimental/AppLayout.tsx
+++ b/src/apps/experimental/AppLayout.tsx
@@ -29,7 +29,7 @@ export const Component = () => {
     }, [ isDrawerActive, setIsDrawerActive ]);
 
     return (
-        <Box sx={{ position: 'relative', display: 'flex' }}>
+        <Box sx={{ position: 'relative', display: 'flex', height: '100%' }}>
             <ElevationScroll elevate={false}>
                 <AppBar
                     position='fixed'
diff --git a/src/apps/experimental/AppOverrides.scss b/src/apps/experimental/AppOverrides.scss
index b9cb74f545..fa586829e9 100644
--- a/src/apps/experimental/AppOverrides.scss
+++ b/src/apps/experimental/AppOverrides.scss
@@ -7,6 +7,10 @@ $mui-bp-xl: 1536px;
 
 $drawer-width: 240px;
 
+#reactRoot {
+    height: 100%;
+}
+
 // Fix main pages layout to work with drawer
 .mainAnimatedPage {
     @media all and (min-width: $mui-bp-md) {