From 3f454a342443f6e420916b96287796355bf78f35 Mon Sep 17 00:00:00 2001
From: Nitish Agarwal <1592163+nitishagar@users.noreply.github.com>
Date: Thu, 20 Nov 2025 12:11:57 +0530
Subject: [PATCH] fix: mobile viewport cropping on video element
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Remove fixed minimum dimensions (min-w-512px, min-h-384px) on mobile
viewports and apply them only on desktop (≥640px) using Tailwind sm:
breakpoint.

This fixes issue where video was cropped on mobile devices preventing
access to UI elements like the Windows 11 shutdown button.

Fixes #565
---
 ui/src/components/WebRTCVideo.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/src/components/WebRTCVideo.tsx b/ui/src/components/WebRTCVideo.tsx
index 64452bf8..0a7c6608 100644
--- a/ui/src/components/WebRTCVideo.tsx
+++ b/ui/src/components/WebRTCVideo.tsx
@@ -524,7 +524,7 @@ export default function WebRTCVideo() {
                         controlsList="nofullscreen"
                         style={videoStyle}
                         className={cx(
-                          "max-h-full min-h-[384px] max-w-full min-w-[512px] bg-black/50 object-contain transition-all duration-1000",
+                          "max-h-full max-w-full sm:min-h-[384px] sm:min-w-[512px] bg-black/50 object-contain transition-all duration-1000",
                           {
                             "cursor-none": settings.isCursorHidden,
                             "opacity-0":