fix offline overlay overflowing on mobile when in grid mode

web/src/components/player/LivePlayer.tsx

@@ -3,6 +3,7 @@ import { CameraConfig } from "@/types/frigateConfig";
 import AutoUpdatingCameraImage from "../camera/AutoUpdatingCameraImage";
 import ActivityIndicator from "../indicators/activity-indicator";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useResizeObserver } from "@/hooks/resize-observer";
 import MSEPlayer from "./MsePlayer";
 import JSMpegPlayer from "./JSMpegPlayer";
 import { MdCircle } from "react-icons/md";
@@ -80,6 +81,7 @@ export default function LivePlayer({
   const { t } = useTranslation(["components/player"]);
 
   const internalContainerRef = useRef<HTMLDivElement | null>(null);
+  const overlayRef = useRef<HTMLDivElement | null>(null);
 
   const cameraName = useCameraFriendlyName(cameraConfig);
 
@@ -87,6 +89,10 @@ export default function LivePlayer({
 
   const inDashboard = containerRef?.current == null;
 
+  const [overlayDimensions] = useResizeObserver(overlayRef);
+  const isCompact =
+    overlayDimensions.width > 0 && overlayDimensions.width < 280;
+
   // stats
 
   const [stats, setStats] = useState<PlayerStatsType>({
@@ -317,7 +323,14 @@ export default function LivePlayer({
 
   return (
     <div
-      ref={cameraRef ?? internalContainerRef}
+      ref={(node) => {
+        overlayRef.current = node;
+        if (cameraRef) {
+          cameraRef(node);
+        } else {
+          internalContainerRef.current = node;
+        }
+      }}
       data-camera={cameraConfig.name}
       className={cn(
         "relative flex w-full cursor-pointer justify-center outline",
@@ -428,6 +441,7 @@ export default function LivePlayer({
             <div className="flex flex-col items-center justify-center gap-2 rounded-lg bg-background/50 p-3 text-center">
               <div className="text-md">{t("streamOffline.title")}</div>
               <TbExclamationCircle className="size-6" />
+              {!isCompact && (
                 <p className="text-center text-sm">
                   <Trans
                     ns="components/player"
@@ -438,6 +452,7 @@ export default function LivePlayer({
                     streamOffline.desc
                   </Trans>
                 </p>
+              )}
             </div>
           </div>
         </>
@@ -448,6 +463,7 @@ export default function LivePlayer({
           <div className="flex flex-col items-center justify-center rounded-lg bg-background/50 p-5">
             <p className="my-5 text-lg">{t("streamOffline.title")}</p>
             <TbExclamationCircle className="mb-3 size-10" />
+            {!isCompact && (
               <p className="max-w-96 text-center">
                 <Trans
                   ns="components/player"
@@ -458,6 +474,7 @@ export default function LivePlayer({
                   streamOffline.desc
                 </Trans>
               </p>
+            )}
           </div>
         </div>
       )}