Fix embed website z-index

front/src/Components/EmbedScreens/EmbedScreensContainer.svelte

@@ -19,6 +19,5 @@
         padding-top: 2%;
         height: 100%;
         position: relative;
-        z-index: 200;
     }
 </style>

front/src/Components/EmbedScreens/Layouts/PresentationLayout.svelte

@@ -67,10 +67,11 @@
                         {/key}
                     {:else if $highlightedEmbedScreen.type === "cowebsite"}
                         {#key $highlightedEmbedScreen.embed.getId()}
+                            <div class="highlighted-cowebsite-container nes-container is-rounded">
                                 <div
                                     id={"cowebsite-slot-" + $highlightedEmbedScreen.embed.getId()}
-                                class="highlighted-cowebsite nes-container is-rounded"
+                                    class="highlighted-cowebsite"
-                            >
+                                />
                                 <div class="actions">
                                     <button type="button" class="nes-btn is-error close" on:click={closeCoWebsite}
                                         >&times;</button
@@ -119,14 +120,22 @@
         margin-bottom: 3%;
 
         .highlighted-cowebsite {
+            height: 100% !important;
+            width: 100% !important;
+            position: relative;
+            z-index: 200;
+
+            &-container {
                 height: 100% !important;
                 width: 96%;
                 background-color: rgba(#000000, 0.6);
                 margin: 0 !important;
-
+                padding: 0 !important;
                 .actions {
-                z-index: 200;
+                    z-index: 202;
-                position: relative;
+                    position: absolute;
+                    width: 100%;
+                    top: 0;
                     display: flex;
                     flex-direction: row;
                     justify-content: end;
@@ -138,4 +147,5 @@
                 }
             }
         }
+    }
 </style>

front/src/Components/HelpCameraSettings/HelpCameraSettingsPopup.svelte

@@ -53,11 +53,14 @@
         background: #eceeee;
         margin-left: auto;
         margin-right: auto;
+        position: absolute;
         left: 0;
         right: 0;
         margin-top: 4%;
         max-height: 80vh;
         max-width: 80vw;
+        margin-left: 10%;
+        margin-right: 10%;
         z-index: 600;
         overflow: auto;
         text-align: center;

front/src/Components/MainLayout.svelte

@@ -68,6 +68,11 @@
     </aside>
 
     <section id="main-layout-main">
+        <Lazy
+            when={$showDesktopCapturerSourcePicker}
+            component={() => import("./Video/DesktopCapturerSourcePicker.svelte")}
+        />
+
         {#if $menuVisiblilityStore}
             <Menu />
         {/if}
@@ -120,11 +125,6 @@
 
         <Lazy when={$emoteMenuStore} component={() => import("./EmoteMenu/EmoteMenu.svelte")} />
 
-        <Lazy
-            when={$showDesktopCapturerSourcePicker}
-            component={() => import("./Video/DesktopCapturerSourcePicker.svelte")}
-        />
-
         {#if hasEmbedScreen}
             <EmbedScreensContainer />
         {/if}

front/style/cowebsite/_global.scss

@@ -92,7 +92,7 @@
 
   &-buffer {
     iframe {
-      z-index: 45 !important;
+      z-index: 201 !important;
       pointer-events: none !important;
       overflow: hidden;
       border: 0;