Fixing absolute/relative layouts of Svelte layers

front/src/Components/App.svelte

@@ -22,31 +22,48 @@
 </script>
 
 <div>
-{#if $gameOverlayVisibilityStore}
-    <MyCamera></MyCamera>
-    <CameraControls></CameraControls>
-{/if}
-<div class="absolute-overlay">
     {#if $loginSceneVisibleStore}
+        <div>
             <LoginScene game={game}></LoginScene>
+        </div>
     {/if}
     {#if $selectCharacterSceneVisibleStore}
+        <div>
             <SelectCharacterScene game={ game }></SelectCharacterScene>
+        </div>
     {/if}
     {#if $customCharacterSceneVisibleStore}
+        <div>
            <CustomCharacterScene game={ game }></CustomCharacterScene>
+        </div>
     {/if}
     {#if $selectCompanionSceneVisibleStore}
+        <div>
             <SelectCompanionScene game={ game }></SelectCompanionScene>
+        </div>
     {/if}
     {#if $enableCameraSceneVisibilityStore}
+        <div>
             <EnableCameraScene game={game}></EnableCameraScene>
+        </div>
     {/if}
-    <!-- {#if $menuIconVisible}
+
+    <!--
+    {#if $menuIconVisible}
+        <div>
             <MenuIcon  />
-    {/if} -->
+        </div>
+    {/if}
+    -->
+    {#if $gameOverlayVisibilityStore}
+        <div>
+            <MyCamera></MyCamera>
+            <CameraControls></CameraControls>
+        </div>
+    {/if}
     {#if $helpCameraSettingsVisibleStore}
+        <div>
             <HelpCameraSettingsPopup game={ game }></HelpCameraSettingsPopup>
+        </div>
     {/if}
 </div>
-</div>

front/src/Components/CameraControls.svelte

@@ -34,7 +34,8 @@
 
 </script>
 
-<div class="btn-cam-action">
+<div>
+    <div class="btn-cam-action">
         <div class="btn-monitor" on:click={screenSharingClick} class:hide={!$screenSharingAvailableStore} class:enabled={$requestedScreenSharingState}>
             {#if $requestedScreenSharingState}
                 <img src={monitorImg} alt="Start screen sharing">
@@ -56,4 +57,5 @@
                 <img src={microphoneCloseImg} alt="Turn off microphone">
             {/if}
         </div>
+    </div>
 </div>

front/src/Components/EnableCamera/EnableCameraScene.svelte

@@ -11,6 +11,8 @@
     import {onDestroy} from "svelte";
     import HorizontalSoundMeterWidget from "./HorizontalSoundMeterWidget.svelte";
     import cinemaCloseImg from "../images/cinema-close.svg";
+    import cinemaImg from "../images/cinema.svg";
+    import microphoneImg from "../images/microphone.svg";
 
     export let game: Game;
     let selectedCamera : string|null = null;
@@ -86,6 +88,8 @@
     <section class="selectWebcamForm">
 
         {#if $cameraListStore.length > 1 }
+            <div class="control-group">
+                <img src={cinemaImg} alt="Camera" />
                 <div class="nes-select">
                     <select bind:value={selectedCamera} on:change={selectCamera}>
                         {#each $cameraListStore as camera}
@@ -95,9 +99,12 @@
                         {/each}
                     </select>
                 </div>
+            </div>
         {/if}
 
         {#if $microphoneListStore.length > 1 }
+            <div class="control-group">
+                <img src={microphoneImg} alt="Microphone" />
                 <div class="nes-select">
                     <select bind:value={selectedMicrophone} on:change={selectMicrophone}>
                         {#each $microphoneListStore as microphone}
@@ -107,6 +114,7 @@
                         {/each}
                     </select>
                 </div>
+            </div>
         {/if}
 
     </section>
@@ -190,6 +198,16 @@
         font-size: 200%;
       }
 
+      .control-group {
+        display: flex;
+        flex-direction: row;
+
+        img {
+          width: 30px;
+          margin-right: 10px;
+        }
+      }
+
       .webrtcsetup{
         /*position: absolute;
         top: 140px;

front/style/style.scss

@@ -1212,13 +1212,15 @@ div.action.danger p.action-body{
     height: 100%;
     pointer-events: none;
 
-    .absolute-overlay {
+    & > div {
-        position: absolute;
+        position: relative;
         width: 100%;
         height: 100%;
 
-        & > * {
+        & > div {
-            position: relative;
+            position: absolute;
+            width: 100%;
+            height: 100%;
         }
     }
 }