From 99bfe11f84b40dcb2c5c3f72ff610541dc0b7903 Mon Sep 17 00:00:00 2001
From: Alexis Faizeau <a.faizeau@workadventu.re>
Date: Tue, 26 Apr 2022 18:38:13 +0200
Subject: [PATCH] Fix embed website z-index

---
 .../EmbedScreens/EmbedScreensContainer.svelte |  1 -
 .../Layouts/PresentationLayout.svelte         | 42 ++++++++++++-------
 .../HelpCameraSettingsPopup.svelte            |  3 ++
 front/src/Components/MainLayout.svelte        | 10 ++---
 front/style/cowebsite/_global.scss            |  2 +-
 5 files changed, 35 insertions(+), 23 deletions(-)

diff --git a/front/src/Components/EmbedScreens/EmbedScreensContainer.svelte b/front/src/Components/EmbedScreens/EmbedScreensContainer.svelte
index d31aac89..95f3ef7c 100644
--- a/front/src/Components/EmbedScreens/EmbedScreensContainer.svelte
+++ b/front/src/Components/EmbedScreens/EmbedScreensContainer.svelte
@@ -19,6 +19,5 @@
         padding-top: 2%;
         height: 100%;
         position: relative;
-        z-index: 200;
     }
 </style>
diff --git a/front/src/Components/EmbedScreens/Layouts/PresentationLayout.svelte b/front/src/Components/EmbedScreens/Layouts/PresentationLayout.svelte
index dbf7ee71..b483f6c4 100644
--- a/front/src/Components/EmbedScreens/Layouts/PresentationLayout.svelte
+++ b/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;
+                    }
                 }
             }
         }
diff --git a/front/src/Components/HelpCameraSettings/HelpCameraSettingsPopup.svelte b/front/src/Components/HelpCameraSettings/HelpCameraSettingsPopup.svelte
index f28d05ca..f868801b 100644
--- a/front/src/Components/HelpCameraSettings/HelpCameraSettingsPopup.svelte
+++ b/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;
diff --git a/front/src/Components/MainLayout.svelte b/front/src/Components/MainLayout.svelte
index 4ddf83dd..2aeed652 100644
--- a/front/src/Components/MainLayout.svelte
+++ b/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}
diff --git a/front/style/cowebsite/_global.scss b/front/style/cowebsite/_global.scss
index 52ca1e75..7555d9de 100644
--- a/front/style/cowebsite/_global.scss
+++ b/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;