fix(web): adjust audio/video inputs to be full screen on small screens

brunocroh · May 30, 2024 · 6c9d903 · 6c9d903
1 parent 1b2c8dd
commit 6c9d903
Showing 1 changed file with 3 additions and 3 deletions.
diff --git 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>