Merge pull request #1131 from thecodingmachine/safari-fix

Fix broken layout on EnableCameraScene on mobile

front/src/Components/EnableCamera/EnableCameraScene.svelte

@@ -93,7 +93,7 @@
         {#if $cameraListStore.length > 1 }
             <div class="control-group">
                 <img src={cinemaImg} alt="Camera" />
-                <div class="nes-select">
+                <div class="nes-select is-dark">
                     <select bind:value={selectedCamera} on:change={selectCamera}>
                         {#each $cameraListStore as camera}
                             <option value={camera.deviceId}>
@@ -108,7 +108,7 @@
         {#if $microphoneListStore.length > 1 }
             <div class="control-group">
                 <img src={microphoneImg} alt="Microphone" />
-                <div class="nes-select">
+                <div class="nes-select is-dark">
                     <select bind:value={selectedMicrophone} on:change={selectMicrophone}>
                         {#each $microphoneListStore as microphone}
                             <option value={microphone.deviceId}>
@@ -136,7 +136,7 @@
         margin-top: 3vh;
         margin-bottom: 3vh;
         min-height: 10vh;
-        width: 50%;
+        width: 50vw;
         margin-left: auto;
         margin-right: auto;
 
@@ -144,12 +144,12 @@
           font-family: "Press Start 2P";
           margin-top: 1vh;
           margin-bottom: 1vh;
+        }
 
-          option {
+        option {
             font-family: "Press Start 2P";
           }
         }
-      }
 
       section.action{
         text-align: center;
@@ -173,6 +173,8 @@
       .control-group {
         display: flex;
         flex-direction: row;
+        max-height: 60px;
+        margin-top: 10px;
 
         img {
           width: 30px;
@@ -210,8 +212,18 @@
         align-items: center;
         justify-content: center;
       }
+    }
 
-
+    @media only screen and (max-width: 800px) {
+      .enableCameraScene h2 {
+        font-size: 80%;
+      }
+      .enableCameraScene .control-group .nes-select {
+        font-size: 80%;
+      }
+      .enableCameraScene button.letsgo {
+        font-size: 160%;
+      }
     }
 </style>