src/GameIdeas/Client/GameIdeas.BlazorApp/Layouts/MainLayout.razor

@@ -13,3 +13,5 @@
 <span class="orb red"></span>
 <span class="orb blue"></span>
 <span class="orb green"></span>
+
+<div class="background"></div>

src/GameIdeas/Client/GameIdeas.BlazorApp/Layouts/MainLayout.razor.css

@@ -1,13 +1,12 @@
 .page {
     height: 100%;
     overflow: hidden;
-    z-index: 1;
 }
 
 .orb {
     position: absolute;
     border-radius: 100%;
-    z-index: -1;
+    z-index: -999;
 }
 
 .green {
@@ -35,3 +34,13 @@
     background: #593533;
     filter: blur(30vh);
 }
+
+.background {
+    height: 100%;
+    width: 100%;
+    background: var(--background);
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: -1000;
+}

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/HeaderLayout.razor.cs

@@ -5,6 +5,7 @@ namespace GameIdeas.BlazorApp.Shared.Components;
 public partial class HeaderLayout : LayoutComponentBase
 {
     private bool AddButtonsVisile = false;
+    private bool AddButtonsActive = false;
     private ElementReference DropdownAdd;
 
     private void HandleIconClicked()
@@ -13,8 +14,16 @@ public partial class HeaderLayout : LayoutComponentBase
     }
 
     private async Task HandleMoreAddClickedAsync()
+    {
+        if (AddButtonsActive == true)
+        {
+            AddButtonsVisile = false;
+        }
+        else
         {
             AddButtonsVisile = !AddButtonsVisile;
+        }
+
         await DropdownAdd.FocusAsync();
     }
         

src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/css/app.css

@@ -29,9 +29,9 @@ html, body, #app {
     overflow: hidden;
 }
 
-#app {
+/*#app {
     background: var(--background);
-}
+}*/
 
 h1:focus {
     outline: none;