Fix responsive Camera Settings

front/dist/resources/html/helpCameraSettings.html

@@ -7,7 +7,7 @@
         width: 400px;
         max-height: calc(50vh - 25px);
         overflow: scroll;
-        max-width: 50vw;
+        max-width: 48vw;
     }
     #helpCameraSettings h1 {
         background-image: linear-gradient(top, #f1f3f3, #d4dae0);
@@ -30,7 +30,7 @@
         margin: 0;
     }
     #helpCameraSettings button {
-        margin: 10px;
+        margin: 10px 4px;
         background-color: black;
         color: white;
         border-radius: 7px;
@@ -41,9 +41,8 @@
         color: #292929;
     }
     #helpCameraSettings section a{
-        text-align: center;
         font-size: 12px;
-        margin: 0 6px;
+        text-decoration: underline;
         color: black;
     }
     #helpCameraSettings section h6,
@@ -87,7 +86,7 @@
         <p id='browserHelpSetting'></p>
     </section>
     <section class="action">
-        <button type="submit" id="helpCameraSettingsFormRefresh">Refresh</button>
+        <a href="#" id="helpCameraSettingsFormRefresh">Refresh</a>
         <button type="submit" id="helpCameraSettingsFormContinue">Continue</button>
     </section>
 </form>

front/dist/resources/style/mobile-style.scss

@@ -1,4 +1,5 @@
-@media only screen and (max-width: 700px) {
+@media screen and (max-width: 700px),
+        screen and (max-height: 700px){
   video#myCamVideo {
     width: 150px;
   }

front/src/Phaser/Menu/HelpCameraSettingsScene.ts

@@ -112,12 +112,14 @@ export class HelpCameraSettingsScene extends Phaser.Scene {
     }
 
     private getMiddleX() : number{
-        const middleX = ((window.innerWidth) - ((
+        return (this.game.renderer.width / 2) -  
+        (
             this.helpCameraSettingsElement
             && this.helpCameraSettingsElement.node
             && this.helpCameraSettingsElement.node.getBoundingClientRect().width > 0
-                ? this.helpCameraSettingsElement.node.getBoundingClientRect().width : 300 /*FIXME to use a const will be injected in HTMLElement*/)*2)) / 2;
-        return (middleX > 0 ? middleX / 2 : 0);
+            ? (this.helpCameraSettingsElement.node.getBoundingClientRect().width / 4)
+            : (400 / 2)
+        );
     }
 
     private getMiddleY() : number{