From a2e5e08b20e12071c090eab64cb9bd064084e5b2 Mon Sep 17 00:00:00 2001
From: Max Ward <max.jp.ward@gmail.com>
Date: Sun, 19 Feb 2023 21:49:52 -0800
Subject: [PATCH] shrink popouts when on horizontal mobile devices

---
 src/video/components/popouts/PopoutProviderAction.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/video/components/popouts/PopoutProviderAction.tsx b/src/video/components/popouts/PopoutProviderAction.tsx
index 8898bf26..23734c2e 100644
--- a/src/video/components/popouts/PopoutProviderAction.tsx
+++ b/src/video/components/popouts/PopoutProviderAction.tsx
@@ -5,6 +5,7 @@ import { SourceSelectionPopout } from "@/video/components/popouts/SourceSelectio
 import { CaptionSelectionPopout } from "@/video/components/popouts/CaptionSelectionPopout";
 import { useVideoPlayerDescriptor } from "@/video/state/hooks";
 import { useControls } from "@/video/state/logic/controls";
+import { useIsMobile } from "@/hooks/useIsMobile";
 import {
   useInterface,
   VideoInterfaceEvent,
@@ -37,6 +38,8 @@ function PopoutContainer(props: { videoInterface: VideoInterfaceEvent }) {
   const [bottom, setBottom] = useState<number>(0);
   const [width, setWidth] = useState<number>(0);
 
+  const { isMobile } = useIsMobile(true);
+
   const calculateAndSetCoords = useCallback((rect: DOMRect, w: number) => {
     const buttonCenter = rect.left + rect.width / 2;
 
@@ -57,7 +60,9 @@ function PopoutContainer(props: { videoInterface: VideoInterfaceEvent }) {
   return (
     <div
       ref={ref}
-      className="absolute z-10 grid h-[500px] w-80 grid-rows-[auto,minmax(0,1fr)] overflow-hidden rounded-lg bg-ash-200"
+      className={`absolute z-10 grid w-80 grid-rows-[auto,minmax(0,1fr)] overflow-hidden rounded-lg bg-ash-200 ${
+        isMobile ? "h-[230px]" : " h-[500px]"
+      }`}
       style={{
         right: `${right}px`,
         bottom: `${bottom}px`,