From 6c9d903cc4005c926c079923ef8f6c96f6a70e73 Mon Sep 17 00:00:00 2001
From: Bruno Rodrigues <brunocroh@gmail.com>
Date: Thu, 30 May 2024 20:54:15 +0100
Subject: [PATCH] fix(web): adjust audio/video inputs to be full screen on
 small screens

---
 apps/web/components/video-player.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/web/components/video-player.tsx b/apps/web/components/video-player.tsx
index 75b69e7..bbdbd25 100644
--- a/apps/web/components/video-player.tsx
+++ b/apps/web/components/video-player.tsx
@@ -63,9 +63,9 @@ export const VideoPlayer = forwardRef<HTMLVideoElement, VideoPlayer>(({
           </div>
           {!remote && (
             <div className="mt-5 flex justify-center">
-              <div className="flex w-full flex-col gap-2 md:w-fit md:flex-row md:gap-6">
+              <div className="flex w-full flex-col gap-2 sm:flex-row md:w-fit md:gap-6">
                 <Select onValueChange={setActiveAudioDevice} value={activeAudioDevice}>
-                  <SelectTrigger className="w-[200px]">
+                  <SelectTrigger className="w-full sm:max-w-48">
                     <Mic size={18} /><SelectValue placeholder="Audio" />
                   </SelectTrigger>
                   <SelectContent>
@@ -83,7 +83,7 @@ export const VideoPlayer = forwardRef<HTMLVideoElement, VideoPlayer>(({
                   </SelectContent>
                 </Select>
                 <Select onValueChange={setActiveVideoDevice} value={activeVideoDevice}>
-                  <SelectTrigger className="w-[180px]">
+                  <SelectTrigger className="w-full sm:max-w-48">
                     <Video size={18} /> <SelectValue placeholder="Video" />
                   </SelectTrigger>
                   <SelectContent>