From fcffaab50e1b8d6fd4d8afb73639ef223686b237 Mon Sep 17 00:00:00 2001
From: grafixeyehero <32230989+grafixeyehero@users.noreply.github.com>
Date: Sat, 1 Jun 2024 18:42:07 -0400
Subject: [PATCH] Backport pull request #5638 from jellyfin-web/release-10.9.z

Fix: Tv guide only covers half the screen in Experimental Layout

Original-merge: 60af8a68f8b91f8e72e71baf2d9795e0e7cf6894

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

Backported-by: Joshua M. Boniface <joshua@boniface.me>
---
 .../components/library/GuideView.tsx             | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/src/apps/experimental/components/library/GuideView.tsx b/src/apps/experimental/components/library/GuideView.tsx
index 926c53e9ea..7f1e687d9e 100644
--- a/src/apps/experimental/components/library/GuideView.tsx
+++ b/src/apps/experimental/components/library/GuideView.tsx
@@ -1,4 +1,5 @@
 import React, { FC, useCallback, useEffect, useRef } from 'react';
+import Box from '@mui/material/Box';
 import Guide from 'components/guide/guide';
 import 'material-design-icons-iconfont';
 import 'elements/emby-programcell/emby-programcell';
@@ -45,7 +46,20 @@ const GuideView: FC = () => {
         };
     }, [initGuide]);
 
-    return <div ref={tvGuideContainerRef} />;
+    return <Box
+        ref={tvGuideContainerRef}
+        className='absolutePageTabContent'
+        sx={{
+            display: 'flex !important',
+            width: 'auto',
+            paddingTop: '0',
+            paddingBottom: '0 !important',
+            top: {
+                xs: '6.9em !important',
+                lg: '4em !important'
+            }
+        }}
+    />;
 };
 
 export default GuideView;