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
-                                id={"cowebsite-slot-" + $highlightedEmbedScreen.embed.getId()}
-                                class="highlighted-cowebsite nes-container is-rounded"
-                            >
+                            <div class="highlighted-cowebsite-container nes-container is-rounded">
+                                <div
+                                    id={"cowebsite-slot-" + $highlightedEmbedScreen.embed.getId()}
+                                    class="highlighted-cowebsite"
+                                />
                                 <div class="actions">
                                     <button type="button" class="nes-btn is-error close" on:click={closeCoWebsite}
                                         >&times;</button
@@ -120,20 +121,29 @@
 
         .highlighted-cowebsite {
             height: 100% !important;
-            width: 96%;
-            background-color: rgba(#000000, 0.6);
-            margin: 0 !important;
+            width: 100% !important;
+            position: relative;
+            z-index: 200;
 
-            .actions {
-                z-index: 200;
-                position: relative;
-                display: flex;
-                flex-direction: row;
-                justify-content: end;
-                gap: 2%;
+            &-container {
+                height: 100% !important;
+                width: 96%;
+                background-color: rgba(#000000, 0.6);
+                margin: 0 !important;
+                padding: 0 !important;
+                .actions {
+                    z-index: 202;
+                    position: absolute;
+                    width: 100%;
+                    top: 0;
+                    display: flex;
+                    flex-direction: row;
+                    justify-content: end;
+                    gap: 2%;
 
-                button {
-                    pointer-events: all;
+                    button {
+                        pointer-events: all;
+                    }
                 }
             }
         }

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;