From 558416e7ad3fad31bc377fd614aa57cc9d4a101f Mon Sep 17 00:00:00 2001
From: Egamorf <maxime.adler76@gmail.com>
Date: Mon, 7 Apr 2025 22:35:12 +0200
Subject: [PATCH 1/6] refactoring css

---
 .../Layouts/MainLayout.razor.css              |  4 +-
 .../Games/Filter/AdvancedGameFilter.razor.css |  5 ++-
 .../Pages/Games/Filter/GameFilter.razor.css   |  5 ++-
 .../Pages/Games/GamesBase.razor.css           |  2 +-
 .../Account/AccountSettings.razor.css         | 15 +++----
 .../Components/Search/SearchInput.razor.css   |  3 +-
 .../Components/SelectListElement.razor.css    | 23 ++---------
 .../Select/MultipleSelectList.razor.css       | 40 ++++++-------------
 .../Components/Select/SelectList.razor.css    |  9 ++++-
 .../SliderRange/SliderRange.razor.cs          |  2 +-
 .../SliderRange/SliderRange.razor.css         |  1 +
 .../Layouts/Header/HeaderLayout.razor.css     | 13 +++---
 .../GameIdeas.BlazorApp/wwwroot/css/app.css   | 23 ++++++++---
 13 files changed, 70 insertions(+), 75 deletions(-)

diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Layouts/MainLayout.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Layouts/MainLayout.razor.css
index cd61f2c..563f058 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Layouts/MainLayout.razor.css
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Layouts/MainLayout.razor.css
@@ -6,7 +6,7 @@
 .orb {
     position: absolute;
     border-radius: 100%;
-    z-index: -999;
+    z-index: var(--index-orb);
 }
 
 .green {
@@ -42,5 +42,5 @@
     position: fixed;
     top: 0;
     left: 0;
-    z-index: -1000;
+    z-index: var(--index-background);
 }
\ No newline at end of file
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/AdvancedGameFilter.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/AdvancedGameFilter.razor.css
index 4c0604a..e2e6529 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/AdvancedGameFilter.razor.css
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/AdvancedGameFilter.razor.css
@@ -2,10 +2,11 @@
     display: flex;
     flex-direction: column;
     gap: 10px;
-    padding-right: 20px;    
+    padding-right: 20px;
     padding-left: 10px;
     height: 100%;
-    border-left: 2px solid var(--light-grey);
+    border-left: 2px solid var(--line);
+    z-index: var(--index-component);
 }
 
 .duplicate {
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor.css
index 75bae77..f1df118 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor.css
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor.css
@@ -3,6 +3,7 @@
     flex-direction: row;
     gap: 8px;
     align-items: center;
+    z-index: var(--index-component);
 }
 
 .search-container {
@@ -26,7 +27,7 @@
     width: 28px;
     min-width: 28px;
     border-radius: var(--small-radius);
-    background: var(--black);
+    background: var(--input-primary);
     overflow: hidden;
 }
 
@@ -40,7 +41,7 @@
 
     .square-button svg:hover {
         cursor: pointer;
-        background: var(--low-white);
+        background: var(--input-selected);
     }
 
 .selected-icon {
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GamesBase.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GamesBase.razor.css
index 21c19a7..d1ba3fc 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GamesBase.razor.css
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GamesBase.razor.css
@@ -7,5 +7,5 @@
 }
 
 .content {
-
+    z-index: var(--index-content);
 }
\ No newline at end of file
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Account/AccountSettings.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Account/AccountSettings.razor.css
index 6a651ee..18ab1f3 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Account/AccountSettings.razor.css
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Account/AccountSettings.razor.css
@@ -4,10 +4,11 @@
     position: fixed;
     animation-name: fade-in;
     animation-duration: 0.4s;
-    border: 2px solid var(--low-white);
-    background: var(--semi-black);
+    border: 2px solid var(--input-selected);
+    background: var(--dropdown-content);
     right: 10px;
     margin-top: 4px;
+    z-index: var(--index-floating);
 }
 
 .invisible {
@@ -30,8 +31,8 @@
 }
 
 ::deep .input-text {
-    background: var(--low-white);
-    border: 2px solid var(--low-white);
+    background: var(--input-selected);
+    border: 2px solid var(--input-selected);
     border-radius: var(--small-radius);
     padding: 6px;
     color: var(--white);
@@ -64,7 +65,7 @@
     width: 18px;
     height: 18px;
     border-radius: 50%;
-    border: 3px solid var(--line-black);
+    border: 3px solid rgba(0, 0, 0, 0.2);
     border-top-color: var(--white);
     animation: loading 1s linear infinite;
     justify-self: center;
@@ -77,7 +78,7 @@
 
 .line {
     margin: 0 6px;
-    border-bottom: 2px solid var(--light-grey);
+    border-bottom: 2px solid var(--line);
 }
 
 .settings-element {
@@ -88,7 +89,7 @@
 }
 
     .settings-element:hover {
-        background: var(--light-grey)
+        background: var(--line)
     }
 
 
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor.css
index 17aca87..eedab03 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor.css
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor.css
@@ -6,10 +6,11 @@
     padding-left: 8px;
     padding-right: 2px;
     border-radius: var(--small-radius);
-    background: var(--black);
+    background: var(--input-primary);
     overflow: hidden;
     align-items: center;
     width: 140px;
+    z-index: var(--index-component);
 }
 
 ::deep .search-field {
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Components/SelectListElement.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Components/SelectListElement.razor.css
index 82363ab..ad6d4c6 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Components/SelectListElement.razor.css
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Components/SelectListElement.razor.css
@@ -6,7 +6,6 @@
     gap: 6px;
     height: 20px;
     align-items: center;
-    z-index: 501;
 }
 
     .select-element:hover {
@@ -43,7 +42,7 @@
 }
 
     .sort:hover {
-        background: var(--low-white);
+        background: var(--input-selected);
     }
 
     .sort .select-label {
@@ -57,7 +56,7 @@
 }
 
     .filter:hover {
-        background: var(--low-white);
+        background: var(--input-selected);
     }
 
     .filter .select-label {
@@ -65,27 +64,13 @@
         margin-right: 6px;
     }
 
-/***** Filter Theme *****/
-.filter {
-    padding: 2px 6px;
-}
-
-    .filter:hover {
-        background: var(--low-white);
-    }
-
-    .filter .select-label {
-        text-wrap: nowrap;
-        margin-right: 6px;
-    }
-
-/***** Filter Theme *****/
+/***** Advanced Filter Theme *****/
 .advancedfilter {
     padding: 2px 6px;
 }
 
     .advancedfilter:hover {
-        background: var(--low-white);
+        background: var(--input-selected);
     }
 
     .advancedfilter .select-label {
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor.css
index 857a5e9..bfdbc90 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor.css
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor.css
@@ -5,7 +5,7 @@
 .select-container {
     margin-top: 4px;
     position: absolute;
-    z-index: 500;
+    z-index: var(--index-dropdown)
 }
 
 .align-right {
@@ -19,47 +19,33 @@
     border-radius: var(--small-radius);
     animation-name: fade-in;
     animation-duration: 0.4s;
-    z-index: 500;
+    background: var(--dropdown-content);
+    box-shadow: var(--drop-shadow);
+    padding: 4px 0;
+}
+
+.select-button {
+    z-index: var(--index-component)
 }
 
 .line {
     margin: 2px 6px;
-    border-bottom: 2px solid var(--low-white);
-}
-
-
-/***** Navigation Theme *****/
-.select-content.navigation {
-    background: var(--violet);
-    box-shadow: var(--drop-shadow);
-}
-
-/***** Sort Theme *****/
-.select-content.sort {
-    background: var(--semi-black);
-    box-shadow: var(--drop-shadow);
-    padding: 4px 0;
+    border-bottom: 2px solid var(--input-selected);
 }
 
 /***** Filter Theme *****/
 .select-content.filter {
-    background: var(--semi-black);
-    box-shadow: var(--drop-shadow);
-    padding: 4px 0;
-    min-width: 150px;
+    min-width: 140px;
 }
 
-/***** AdvanceFilter Theme *****/
+/***** Advanced Filter Theme *****/
 .select-content.advancedfilter {
-    background: var(--light-grey);
-    box-shadow: var(--drop-shadow);
-    padding: 4px 0;
-    min-width: 150px;
+    min-width: 210px;
 }
 
 ::deep .select-button.advancedfilter .search-container {
     height: 24px;
     width: 210px;
-    border: 2px solid var(--low-white);
+    border: 2px solid var(--input-selected);
 }
 
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectList.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectList.razor.css
index 3e5473b..56150db 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectList.razor.css
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectList.razor.css
@@ -5,6 +5,7 @@
 .select-container {
     margin-top: 4px;
     position: absolute;
+    z-index: var(--index-dropdown)
 }
 
 .align-right {
@@ -20,9 +21,13 @@
     animation-duration: 0.4s;
 }
 
+.select-button {
+    z-index: var(--index-component)
+}
+
 .line {
     margin: 2px 6px;
-    border-bottom: 2px solid var(--low-white);
+    border-bottom: 2px solid var(--input-selected);
 }
 
 
@@ -34,7 +39,7 @@
 
 /***** Sort Theme *****/
 .select-content.sort {
-    background: var(--semi-black);
+    background: var(--dropdown-content);
     box-shadow: var(--drop-shadow);
     padding: 4px 0;
 }
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SliderRange/SliderRange.razor.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SliderRange/SliderRange.razor.cs
index bdc2846..41841cb 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SliderRange/SliderRange.razor.cs
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SliderRange/SliderRange.razor.cs
@@ -37,7 +37,7 @@ public partial class SliderRange
     {
         var percent1 = (double)(Params.ValueMin - Params.Min) / (Params.Max - Params.Min) * 100;
         var percent2 = (double)(Params.ValueMax - Params.Min) / (Params.Max - Params.Min) * 100;
-        return $"background: linear-gradient(to right, var(--light-grey) {percent1}% , var(--violet) {percent1}% , var(--violet) {percent2}%, var(--light-grey) {percent2}%)";
+        return $"background: linear-gradient(to right, var(--line) {percent1}% , var(--violet) {percent1}% , var(--violet) {percent2}%, var(--line) {percent2}%)";
     }
 
     private string StatusColor(int value)
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SliderRange/SliderRange.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SliderRange/SliderRange.razor.css
index cf23999..c27647d 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SliderRange/SliderRange.razor.css
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SliderRange/SliderRange.razor.css
@@ -1,6 +1,7 @@
 .container {
     position: relative;
     width: 100%;
+    z-index: var(--index-component)
 }
 
 input[type="range"] {
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Layouts/Header/HeaderLayout.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Layouts/Header/HeaderLayout.razor.css
index 7661644..013f027 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Layouts/Header/HeaderLayout.razor.css
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Layouts/Header/HeaderLayout.razor.css
@@ -5,6 +5,7 @@
     align-items: flex-end;
     padding: 0px 10px;
     height: 40px;
+    z-index: var(--index-layout)
 }
 
 .icon-container {
@@ -33,7 +34,6 @@
 }
 
 .add-container {
-    overflow: visible;
     margin-right: 40px;
 }
 
@@ -42,7 +42,6 @@
     flex-direction: row;
     background: var(--violet);
     border-radius: var(--small-radius);
-    overflow: visible;
 }
 
 .button {
@@ -54,11 +53,15 @@
 }
 
 .first-button {
-    border-right: 2px solid var(--line-black);
+    border-right: 2px solid var(--violet-selected);
+    border-radius: var(--small-radius) 0 0 var(--small-radius);
+    overflow: hidden;
 }
 
 .second-button .button-icon {
     padding: 6px;
+    border-radius: 0 var(--small-radius) var(--small-radius) 0;
+    overflow: hidden;
 }
 
 .button-icon {
@@ -66,10 +69,10 @@
 }
 
     .button-icon:hover {
-        background: var(--line-black);
+        background: var(--violet-selected);
         cursor: pointer;
     }
 
 .account-icon {
-    fill: var(--light-grey);
+    fill: var(--line);
 }
\ No newline at end of file
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/css/app.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/css/app.css
index 725eae6..0158695 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/css/app.css
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/css/app.css
@@ -7,16 +7,27 @@
     --red: #FF5E51;
     --yellow: #FFC107;
     --green: #43F8C0;
-    --light-grey: #5C5C5E;
-    --black: rgba(0, 0, 0, 0.8);
     --white: #fff;
-    --low-white: rgb(255, 255, 255, 0.1);
-    --semi-black: rgba(0, 0, 0, 0.5);
-    --line-black: rgba(0, 0, 0, 0.2);
+    --line: #5C5C5E;
+    --input-primary: rgba(0, 0, 0, 0.8);
+    --input-secondary: rgb(45, 45, 48);
+    --input-selected: rgb(255, 255, 255, 0.1);
+    --dropdown-content: rgb(45, 45, 48);
+
     --small-radius: 4px;
     --big-radius: 10px;
-    --radius: 6px;
+
     --drop-shadow: 0px 0px 20px rgba(0, 0, 0, 0.25);
+
+    --index-background: -100;
+    --index-orb: -1;
+    --index-content: 0;
+    --index-layout: 100;
+    --index-component: 300;
+    --index-floating: 500;
+    --index-dropdown: 700;
+    --index-backdrop: 900;
+    --index-popup: 1000;
 }
 
 html {
-- 
2.39.5


From de42286cd57e887ab2166df05892d0ec2de1cee3 Mon Sep 17 00:00:00 2001
From: Egamorf <maxime.adler76@gmail.com>
Date: Mon, 7 Apr 2025 23:26:37 +0200
Subject: [PATCH 2/6] Fix dropdown with backdrop filter

---
 .../BackdropFilter/BackdropFilter.razor       | 55 +++++++++++++++++++
 .../BackdropFilter/BackdropFilter.razor.css   | 13 +++++
 .../BackdropFilter/BackdropFilter.razor.js    |  3 +
 .../BackdropFilter/BackdropFilterColor.cs     |  7 +++
 .../Components/Search/SearchInput.razor       |  6 +-
 .../Components/Search/SearchInput.razor.cs    |  8 +++
 .../Select/MultipleSelectList.razor           | 19 ++++---
 .../Select/MultipleSelectList.razor.cs        | 50 ++++-------------
 .../Select/MultipleSelectList.razor.css       |  5 ++
 .../GameIdeas.BlazorApp/wwwroot/css/app.css   |  4 +-
 10 files changed, 119 insertions(+), 51 deletions(-)
 create mode 100644 src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/BackdropFilter/BackdropFilter.razor
 create mode 100644 src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/BackdropFilter/BackdropFilter.razor.css
 create mode 100644 src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/BackdropFilter/BackdropFilter.razor.js
 create mode 100644 src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/BackdropFilter/BackdropFilterColor.cs

diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/BackdropFilter/BackdropFilter.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/BackdropFilter/BackdropFilter.razor
new file mode 100644
index 0000000..97a356b
--- /dev/null
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/BackdropFilter/BackdropFilter.razor
@@ -0,0 +1,55 @@
+@if (IsVisible)
+{
+    <div class="backdrop-filter @Color.ToString().ToLower()" @onclick="HandleBackdropClicked"></div>
+}
+
+@code {
+    [Inject] private IJSRuntime Js { get; set; } = default!;
+    [Parameter] public EventCallback OnClick { get; set; }
+    [Parameter] public bool AllowBodyScroll { get; set; }
+    [Parameter] public BackdropFilterColor Color { get; set; } = BackdropFilterColor.Overlay;
+    [Parameter] public bool CloseOnClick { get; set; } = true;
+    [Parameter] public bool IsVisible { get; set; }
+
+    public async Task Show()
+    {
+        IsVisible = true;
+        await HandleBodyOverflow();
+    }
+
+    public async Task Hide()
+    {
+        IsVisible = false;
+        await HandleBodyOverflow();
+    }
+
+    private async Task HandleBodyOverflow()
+    {
+        try
+        {
+            if (AllowBodyScroll) return;
+
+            if (IsVisible)
+            {
+                await Js.InvokeVoidAsync("setBodyOverflow", "hidden");
+            }
+            else
+            {
+                await Js.InvokeVoidAsync("setBodyOverflow", "auto");
+            }
+        }
+        catch (Exception)
+        {
+            // ignored because js not loaded
+        }
+    }
+
+    private async Task HandleBackdropClicked()
+    {
+        if (!CloseOnClick) return;
+
+        await Hide();
+        await OnClick.InvokeAsync();
+    }
+
+}
\ No newline at end of file
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/BackdropFilter/BackdropFilter.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/BackdropFilter/BackdropFilter.razor.css
new file mode 100644
index 0000000..5d089d1
--- /dev/null
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/BackdropFilter/BackdropFilter.razor.css
@@ -0,0 +1,13 @@
+.backdrop-filter {
+    position: fixed;
+    inset: 0;
+    z-index: var(--index-backdrop);
+}
+
+    .backdrop-filter.overlay {
+        background-color: var(--grey-filter);
+    }
+
+    .backdrop-filter.transparent {
+        background-color: transparent;
+    }
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/BackdropFilter/BackdropFilter.razor.js b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/BackdropFilter/BackdropFilter.razor.js
new file mode 100644
index 0000000..3f2b25b
--- /dev/null
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/BackdropFilter/BackdropFilter.razor.js
@@ -0,0 +1,3 @@
+window.setBodyOverflow = (overflow) => {
+    document.getElementsByTagName('html')[0].style.overflow = overflow;
+}
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/BackdropFilter/BackdropFilterColor.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/BackdropFilter/BackdropFilterColor.cs
new file mode 100644
index 0000000..16cddd2
--- /dev/null
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/BackdropFilter/BackdropFilterColor.cs
@@ -0,0 +1,7 @@
+namespace GameIdeas.BlazorApp.Shared.Components.BackdropFilter;
+
+public enum BackdropFilterColor
+{
+    Overlay,
+    Transparent
+}
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor
index 911db66..8ceeca7 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor
@@ -1,10 +1,12 @@
 <div class="search-container">
-    <input type="text"
+    <input @ref=InputText
+           type="text"
            class="search-field"
            placeholder="@Placeholder"
            @bind=@Text
            @bind:event="oninput"
-           @bind:after=HandleTextChanged />
+           @bind:after=HandleTextChanged
+           @onfocusin=HandleFocusIn/>
 
     @if (!string.IsNullOrEmpty(Text))
     {
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor.cs
index 3e3f8e6..755f951 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor.cs
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor.cs
@@ -9,8 +9,11 @@ public partial class SearchInput
     [Parameter] public EventCallback<string> TextChanged { get; set; }
     [Parameter] public EventCallback ClearClicked { get; set; }
     [Parameter] public EventCallback SearchClicked { get; set; }
+    [Parameter] public EventCallback FocusIn { get; set; }
     [Parameter] public SearchInputIcon Icon { get; set; }
 
+    private ElementReference InputText;
+
     protected override void OnInitialized()
     {
         Text = string.Empty;
@@ -36,5 +39,10 @@ public partial class SearchInput
     {
         await TextChanged.InvokeAsync(Text);
         await SearchClicked.InvokeAsync();
+        await InputText.FocusAsync();
+    }
+    private async Task HandleFocusIn()
+    {
+        await FocusIn.InvokeAsync();
     }
 }
\ No newline at end of file
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor
index 54c465f..0f91a06 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor
@@ -1,21 +1,19 @@
-@using GameIdeas.BlazorApp.Shared.Components.Search
+@using GameIdeas.BlazorApp.Shared.Components.BackdropFilter
+@using GameIdeas.BlazorApp.Shared.Components.Search
 @using GameIdeas.BlazorApp.Shared.Components.Select.Components
 @typeparam TItem
 
-<div class="select-list" tabindex="1001" @ref="BaseElement">
-    <div class="select-button @(Enum.GetName(Theme)?.ToLower())" @onfocusin=HandleFocusIn @onfocusout=HandleFocusOut>
+<div class="select-list">
+    <div class="select-button @(Enum.GetName(Theme)?.ToLower())">
         <SearchInput @ref=SearchInput
                      Icon="SearchInputIcon.Dropdown"
                      Placeholder="@Placeholder"
                      TextChanged="HandleTextChanged"
                      ClearClicked="HandleTextChanged"
-                     SearchClicked="HandleSearchClicked" />
+                     SearchClicked="HandleSearchClicked"
+                     FocusIn="HandleTextFocusIn"/>
     </div>
-    <div class="select-container @(AlignRight ? "align-right" : "")"
-         tabindex="1000"
-         @ref=ContentElement
-         @onfocusin=HandleContentFocusIn
-         @onfocusout=HandleContentFocusOut>
+    <div class="select-container @(AlignRight ? "align-right" : "")">
 
         @if (IsContentOpen)
         {
@@ -32,3 +30,6 @@
     </div>
 </div>
 
+<BackdropFilter AllowBodyScroll=true CloseOnClick=true Color="BackdropFilterColor.Transparent"
+                IsVisible=IsContentOpen OnClick="HandleContentClosed" />
+
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor.cs
index 4ecef67..7fb4b15 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor.cs
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor.cs
@@ -13,60 +13,34 @@ public partial class MultipleSelectList<TItem>
     [Parameter] public bool AlignRight { get; set; }
     [Parameter] public string? Placeholder { get; set; }
 
-    private bool IsContentOpen
-    {
-        get => InputFocus || ContentFocus;
-    }
-
-    private bool InputFocus = false;
-    private bool ContentFocus = false;
+    private bool IsContentOpen = false;
     private SearchInput? SearchInput;
-    private ElementReference ContentElement;
-    private ElementReference BaseElement;
 
     private async Task HandleItemClicked(SelectElement<TItem> selectedValue)
     {
+        selectedValue.IsSelected = !selectedValue.IsSelected;
+
         Values = Items.Where(x => x.IsSelected && x.Item != null).Select(x => x.Item!);
         SearchInput?.SetText(string.Join(", ", Values));
+
         await ValuesChanged.InvokeAsync(Values);
     }
 
-    private async Task HandleTextChanged()
+    private void HandleTextChanged()
     {
-        await BaseElement.FocusAsync();
+        IsContentOpen = false;
     }
 
-    private void HandleFocusIn()
+    private void HandleSearchClicked()
     {
-        InputFocus = true;
+        IsContentOpen = !IsContentOpen;
     }
-
-    private void HandleContentFocusIn()
+    private void HandleContentClosed()
     {
-        ContentFocus = true;
+        IsContentOpen = false;
     }
-
-    private async Task HandleContentFocusOut()
+    private void HandleTextFocusIn()
     {
-        await Task.Delay(TimeSpan.FromSeconds(0.3));
-        ContentFocus = false;
-    }
-
-    private async Task HandleFocusOut()
-    {
-        await Task.Delay(TimeSpan.FromSeconds(0.3));
-        InputFocus = false;
-    }
-
-    private async Task HandleSearchClicked()
-    {
-        if (!IsContentOpen)
-        {
-            await ContentElement.FocusAsync();
-        }
-        else
-        {
-            await BaseElement.FocusAsync();
-        }
+        IsContentOpen = true;
     }
 }
\ No newline at end of file
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor.css
index bfdbc90..3f5a5d9 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor.css
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor.css
@@ -47,5 +47,10 @@
     height: 24px;
     width: 210px;
     border: 2px solid var(--input-selected);
+    background: var(--input-secondary);
+}
+
+::deep .select-button.advancedfilter .search-container input::placeholder {
+    color: #ddd;
 }
 
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/css/app.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/css/app.css
index 0158695..c8e9eca 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/css/app.css
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/css/app.css
@@ -25,8 +25,8 @@
     --index-layout: 100;
     --index-component: 300;
     --index-floating: 500;
-    --index-dropdown: 700;
-    --index-backdrop: 900;
+    --index-backdrop: 700;
+    --index-dropdown: 900;
     --index-popup: 1000;
 }
 
-- 
2.39.5


From 778b123c643848329c518e7da12f9e86252ed1bd Mon Sep 17 00:00:00 2001
From: Egamorf <maxime.adler76@gmail.com>
Date: Tue, 8 Apr 2025 01:45:48 +0200
Subject: [PATCH 3/6] Refactor style for dropdown

---
 .../Layouts/MainLayout.razor.css              |  6 ++--
 .../Games/Filter/AdvancedGameFilter.razor.css |  2 ++
 .../Components/Search/SearchInput.razor       | 32 +++++++------------
 .../Components/Search/SearchInput.razor.cs    | 12 +++++++
 .../Components/Search/SearchInput.razor.css   | 18 +++++------
 .../Components/SelectListElement.razor.cs     |  7 ----
 .../Components/SelectListElement.razor.css    |  4 +--
 .../Select/MultipleSelectList.razor           |  2 +-
 .../Select/MultipleSelectList.razor.cs        | 10 +++++-
 .../Select/MultipleSelectList.razor.css       | 21 +++---------
 .../GameIdeas.BlazorApp/wwwroot/css/app.css   |  1 -
 .../GameIdeas.Shared/Constants/Icons.cs       | 23 +++++++++++++
 12 files changed, 78 insertions(+), 60 deletions(-)
 create mode 100644 src/GameIdeas/GameIdeas.Shared/Constants/Icons.cs

diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Layouts/MainLayout.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Layouts/MainLayout.razor.css
index 563f058..00c4284 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Layouts/MainLayout.razor.css
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Layouts/MainLayout.razor.css
@@ -1,6 +1,8 @@
 .page {
-    height: 100%;
-    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    max-height: 100vh;
+    height: 100vh;
 }
 
 .orb {
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/AdvancedGameFilter.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/AdvancedGameFilter.razor.css
index e2e6529..b854400 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/AdvancedGameFilter.razor.css
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/AdvancedGameFilter.razor.css
@@ -5,6 +5,8 @@
     padding-right: 20px;
     padding-left: 10px;
     height: 100%;
+    box-sizing: border-box;
+    width: 240px;
     border-left: 2px solid var(--line);
     z-index: var(--index-component);
 }
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor
index 8ceeca7..f94456b 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor
@@ -1,4 +1,5 @@
-<div class="search-container">
+@using GameIdeas.Shared.Constants
+<div class="search-container">
     <input @ref=InputText
            type="text"
            class="search-field"
@@ -8,26 +9,17 @@
            @bind:after=HandleTextChanged
            @onfocusin=HandleFocusIn/>
 
-    @if (!string.IsNullOrEmpty(Text))
-    {
-        <div class="clear-icon" @onclick=HandleClearClicked>
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-                <path d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z" />
-            </svg>
-        </div>
-    }
+    <div class="buttons">
+        @if (!string.IsNullOrEmpty(Text))
+        {
+            <div class="clear-icon" @onclick=HandleClearClicked>
+                @ClearIcon
+            </div>
+        }
 
-    <div class="search-icon @(Enum.GetName(Icon)?.ToLower())" @onclick=HandleSearchClicked>
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-            @if (Icon == SearchInputIcon.Search)
-            {
-                <path d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z" />
-            }
-            else if (Icon == SearchInputIcon.Dropdown)
-            {
-                <path d="M1 3H23L12 22" />
-            }
-        </svg>
+        <div class="search-icon @(Enum.GetName(Icon)?.ToLower())" @onclick=HandleSearchClicked>
+            @GetSearchIcon()
+        </div>
     </div>
 </div>
 
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor.cs
index 755f951..5b8ddfd 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor.cs
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor.cs
@@ -1,3 +1,4 @@
+using GameIdeas.Shared.Constants;
 using Microsoft.AspNetCore.Components;
 
 namespace GameIdeas.BlazorApp.Shared.Components.Search;
@@ -13,6 +14,7 @@ public partial class SearchInput
     [Parameter] public SearchInputIcon Icon { get; set; }
 
     private ElementReference InputText;
+    private readonly MarkupString ClearIcon = new(Icons.Search.Clear);
 
     protected override void OnInitialized()
     {
@@ -45,4 +47,14 @@ public partial class SearchInput
     {
         await FocusIn.InvokeAsync();
     }
+
+    private MarkupString GetSearchIcon()
+    {
+        return Icon switch
+        {
+            SearchInputIcon.Dropdown => new MarkupString(Icons.Search.Triangle),
+            SearchInputIcon.Search => new MarkupString(Icons.Search.Glass),
+            _ => new MarkupString()
+        };
+    }
 }
\ No newline at end of file
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor.css
index eedab03..2b6eddc 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor.css
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor.css
@@ -9,8 +9,8 @@
     background: var(--input-primary);
     overflow: hidden;
     align-items: center;
-    width: 140px;
     z-index: var(--index-component);
+    justify-content: space-between;
 }
 
 ::deep .search-field {
@@ -34,7 +34,7 @@
         cursor: pointer;
     }
 
-    .clear-icon svg {
+    ::deep .clear-icon svg {
         fill: var(--white);
     }
 
@@ -49,11 +49,11 @@
         cursor: pointer;
     }
 
-    .search-icon svg {
-        fill: var(--white);
-    }
+::deep .search-icon svg {
+    fill: var(--white);
+}
 
-    .search-icon.dropdown svg {
-        fill: var(--violet);
-        transform: scale(.8, .5);
-    }
+::deep .search-icon.dropdown svg {
+    fill: var(--violet);
+    transform: scale(.8, .5);
+}
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Components/SelectListElement.razor.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Components/SelectListElement.razor.cs
index 917c9a6..d434875 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Components/SelectListElement.razor.cs
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Components/SelectListElement.razor.cs
@@ -10,13 +10,6 @@ public partial class SelectListElement<TItem>
     [Parameter] public SelectListTheme Theme { get; set; }
     private async Task HandleItemClicked()
     {
-        if (Value == null)
-        {
-            return;
-        }
-
-        Value.IsSelected = true;
-        StateHasChanged();
         await ValueChanged.InvokeAsync(Value);
     }
 }
\ No newline at end of file
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Components/SelectListElement.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Components/SelectListElement.razor.css
index ad6d4c6..ea41ed2 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Components/SelectListElement.razor.css
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Components/SelectListElement.razor.css
@@ -1,8 +1,7 @@
 .select-element {
     display: flex;
     flex-direction: row;
-    width: fit-content;
-    width: 100%;
+    width: auto;
     gap: 6px;
     height: 20px;
     align-items: center;
@@ -17,6 +16,7 @@
     min-width: 12px;
     height: 12px;
     min-height: 12px;
+    border: 1px solid var(--line);
 }
 
 .selected svg {
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor
index 0f91a06..83c296a 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor
@@ -13,7 +13,7 @@
                      SearchClicked="HandleSearchClicked"
                      FocusIn="HandleTextFocusIn"/>
     </div>
-    <div class="select-container @(AlignRight ? "align-right" : "")">
+    <div class="select-container">
 
         @if (IsContentOpen)
         {
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor.cs
index 7fb4b15..870cf7c 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor.cs
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor.cs
@@ -26,9 +26,17 @@ public partial class MultipleSelectList<TItem>
         await ValuesChanged.InvokeAsync(Values);
     }
 
-    private void HandleTextChanged()
+    private async Task HandleTextChanged()
     {
         IsContentOpen = false;
+
+        foreach (var item in Items)
+        {
+            item.IsSelected = false;
+        }
+
+        Values = Items.Where(x => x.IsSelected && x.Item != null).Select(x => x.Item!);
+        await ValuesChanged.InvokeAsync(Values);
     }
 
     private void HandleSearchClicked()
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor.css
index 3f5a5d9..b229fa7 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor.css
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor.css
@@ -3,15 +3,14 @@
 }
 
 .select-container {
+    overflow: auto;
+    right: 0;
+    min-width: 100%;
     margin-top: 4px;
     position: absolute;
     z-index: var(--index-dropdown)
 }
 
-.align-right {
-    right: 0;
-}
-
 .select-content {
     overflow: hidden;
     display: flex;
@@ -33,24 +32,12 @@
     border-bottom: 2px solid var(--input-selected);
 }
 
-/***** Filter Theme *****/
-.select-content.filter {
-    min-width: 140px;
-}
-
-/***** Advanced Filter Theme *****/
-.select-content.advancedfilter {
-    min-width: 210px;
-}
-
 ::deep .select-button.advancedfilter .search-container {
     height: 24px;
-    width: 210px;
-    border: 2px solid var(--input-selected);
     background: var(--input-secondary);
 }
 
 ::deep .select-button.advancedfilter .search-container input::placeholder {
-    color: #ddd;
+    color: #bbb;
 }
 
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/css/app.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/css/app.css
index c8e9eca..95c1137 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/css/app.css
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/css/app.css
@@ -40,7 +40,6 @@ html, body, #app {
     margin: 0;
     padding: 0;
     height: 100%;
-    overflow: hidden;
 }
 
 .valid.modified:not([type=checkbox]) {
diff --git a/src/GameIdeas/GameIdeas.Shared/Constants/Icons.cs b/src/GameIdeas/GameIdeas.Shared/Constants/Icons.cs
new file mode 100644
index 0000000..5c2f030
--- /dev/null
+++ b/src/GameIdeas/GameIdeas.Shared/Constants/Icons.cs
@@ -0,0 +1,23 @@
+namespace GameIdeas.Shared.Constants;
+
+public static class Icons
+{
+    private const string OpenBraket = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">";
+    private const string CloseBraket = "</svg>";
+
+
+    public static class Search
+    {
+        public const string Clear = OpenBraket +
+            "<path d=\"M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z\" />" +
+            CloseBraket;
+
+        public const string Glass = OpenBraket +
+            "<path d=\"M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z\" />" +
+            CloseBraket;
+
+        public const string Triangle = OpenBraket +
+            "<path d=\"M1 3H23L12 22\" />" +
+            CloseBraket;
+    }
+}
-- 
2.39.5


From 7cd289fc5db28783d3718ff19e1c481ba98fcd97 Mon Sep 17 00:00:00 2001
From: Maxime Adler <madler@sqli.com>
Date: Tue, 8 Apr 2025 14:28:33 +0200
Subject: [PATCH 4/6] Refactor header and base page

---
 .../Layouts/MainLayout.razor.css              |   3 +-
 .../Pages/Games/Filter/GameFilter.razor       | 106 +++++++++---------
 .../Pages/Games/Filter/GameFilter.razor.cs    |   8 +-
 .../Pages/Games/GamesBase.razor               |  12 +-
 .../Pages/Games/GamesBase.razor.cs            |   2 +-
 .../Pages/Games/GamesBase.razor.css           |   1 +
 .../Games/Header/GamesHeader.razor}           |  18 ++-
 .../Games/Header/GamesHeader.razor.cs}        |   8 +-
 .../Games/Header/GamesHeader.razor.css}       |   1 -
 .../Pages/Games/Models/AddType.cs             |   7 --
 .../Pages/Games/Models/DisplayType.cs         |   7 --
 .../Components/Search/SearchInput.razor.css   |   5 +
 .../Select/MultipleSelectList.razor.cs        |   1 +
 .../Shared/Components/Select/SelectList.razor |  14 ++-
 .../Components/Select/SelectList.razor.cs     |  25 ++---
 .../Shared/Models/AddType.cs                  |   7 ++
 .../Shared/Models/DisplayType.cs              |   7 ++
 .../GameIdeas.BlazorApp/wwwroot/css/app.css   |   4 +-
 18 files changed, 113 insertions(+), 123 deletions(-)
 rename src/GameIdeas/Client/GameIdeas.BlazorApp/{Shared/Layouts/Header/HeaderLayout.razor => Pages/Games/Header/GamesHeader.razor} (79%)
 rename src/GameIdeas/Client/GameIdeas.BlazorApp/{Shared/Layouts/Header/HeaderLayout.razor.cs => Pages/Games/Header/GamesHeader.razor.cs} (80%)
 rename src/GameIdeas/Client/GameIdeas.BlazorApp/{Shared/Layouts/Header/HeaderLayout.razor.css => Pages/Games/Header/GamesHeader.razor.css} (97%)
 delete mode 100644 src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Models/AddType.cs
 delete mode 100644 src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Models/DisplayType.cs
 create mode 100644 src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Models/AddType.cs
 create mode 100644 src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Models/DisplayType.cs

diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Layouts/MainLayout.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Layouts/MainLayout.razor.css
index 00c4284..407f5bd 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Layouts/MainLayout.razor.css
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Layouts/MainLayout.razor.css
@@ -1,8 +1,7 @@
 .page {
     display: flex;
     flex-direction: column;
-    max-height: 100vh;
-    height: 100vh;
+    height: 100%;
 }
 
 .orb {
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor
index 82e7152..06a2942 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor
@@ -2,67 +2,61 @@
 @using GameIdeas.BlazorApp.Shared.Components.Select
 @using GameIdeas.BlazorApp.Shared.Components.Select.Models
 @using GameIdeas.BlazorApp.Shared.Components.SliderRange
+@using GameIdeas.BlazorApp.Shared.Models
 @using GameIdeas.Shared.Dto
-@using GameIdeas.BlazorApp.Pages.Games.Models
 
-
-<EditForm EditContext="EditContext">
-    <div class="form-filter">
-        <SelectList TItem="Func<GameDto, object>"
-                    Headers="SortTypes"
-                    Items="GameProperties"
-                    @bind-Value=GameFilterParams!.SortProperty
-                    HeaderChanged=HandleSortTypeChanged
-                    Theme="SelectListTheme.Sort">
-            <Button>
-                <div class="square-button">
-                    <svg class="sort-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-                        <path d="M10,13H22V11H10M10,19H22V17H10M10,7H22V5H10M6,7H8.5L5,3.5L1.5,7H4V17H1.5L5,20.5L8.5,17H6V7Z" />
-                    </svg>
-                </div>
-            </Button>
-        </SelectList>
-
-        <div class="square-button" @onclick="@(() => HandleDisplayClicked(DisplayType.List))">
-            <svg class="list-icon @(DisplayType == DisplayType.List ? "selected-icon" : "")" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-                <path d="M4,5V7H21V5M4,11H21V9H4M4,19H21V17H4M4,15H21V13H4V15Z" />
+<div class="form-filter">
+    <SelectList TItem="Func<GameDto, object>"
+                Headers="SortTypes"
+                Items="GameProperties"
+                @bind-Value=GameFilterParams!.SortProperty
+                HeaderChanged=HandleSortTypeChanged
+                Theme="SelectListTheme.Sort">
+        <div class="square-button">
+            <svg class="sort-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                <path d="M10,13H22V11H10M10,19H22V17H10M10,7H22V5H10M6,7H8.5L5,3.5L1.5,7H4V17H1.5L5,20.5L8.5,17H6V7Z" />
             </svg>
         </div>
+    </SelectList>
 
-        <div class="square-button" @onclick="@(() => HandleDisplayClicked(DisplayType.Card))">
-            <svg class="card-icon @(DisplayType == DisplayType.Card ? "selected-icon" : "")" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-                <path d="M16,5V11H21V5M10,11H15V5H10M16,18H21V12H16M10,18H15V12H10M4,18H9V12H4M4,11H9V5H4V11Z" />
-            </svg>
-        </div>
-
-        <div class="search-container">
-            <SearchInput @bind-Text=GameFilterParams.SearchName
-                         Placeholder="@ResourcesKey.Research" />
-        </div>
-
-        <div class="select-container">
-            <MultipleSelectList TItem="string"
-                                Items="Plateforms"
-                                Placeholder="@ResourcesKey.Platforms"
-                                @bind-Values=GameFilterParams.Plateforms
-                                Theme="SelectListTheme.Filter" />
-        </div>
-
-        <div class="select-container">
-            <MultipleSelectList TItem="string"
-                                Items="Genres"
-                                Placeholder="@ResourcesKey.Genres"
-                                @bind-Values=GameFilterParams.Genres
-                                Theme="SelectListTheme.Filter" />
-        </div>
-
-        <div class="slider-container">
-            <SliderRange Params="SliderRangeParams"
-                         @bind-Max=GameFilterParams.MaxRating
-                         @bind-Min=GameFilterParams.MinRating />
-        </div>
+    <div class="square-button" @onclick="@(() => HandleDisplayClicked(DisplayType.List))">
+        <svg class="list-icon @(DisplayType == DisplayType.List ? "selected-icon" : "")" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+            <path d="M4,5V7H21V5M4,11H21V9H4M4,19H21V17H4M4,15H21V13H4V15Z" />
+        </svg>
     </div>
-</EditForm>
-
+
+    <div class="square-button" @onclick="@(() => HandleDisplayClicked(DisplayType.Card))">
+        <svg class="card-icon @(DisplayType == DisplayType.Card ? "selected-icon" : "")" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+            <path d="M16,5V11H21V5M10,11H15V5H10M16,18H21V12H16M10,18H15V12H10M4,18H9V12H4M4,11H9V5H4V11Z" />
+        </svg>
+    </div>
+
+    <div class="search-container">
+        <SearchInput @bind-Text=GameFilterParams.SearchName
+                        Placeholder="@ResourcesKey.Research" />
+    </div>
+
+    <div class="select-container">
+        <MultipleSelectList TItem="string"
+                            Items="Plateforms"
+                            Placeholder="@ResourcesKey.Platforms"
+                            @bind-Values=GameFilterParams.Plateforms
+                            Theme="SelectListTheme.Filter" />
+    </div>
+
+    <div class="select-container">
+        <MultipleSelectList TItem="string"
+                            Items="Genres"
+                            Placeholder="@ResourcesKey.Genres"
+                            @bind-Values=GameFilterParams.Genres
+                            Theme="SelectListTheme.Filter" />
+    </div>
+
+    <div class="slider-container">
+        <SliderRange Params="SliderRangeParams"
+                        @bind-Max=GameFilterParams.MaxRating
+                        @bind-Min=GameFilterParams.MinRating />
+    </div>
+</div>
 
 
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor.cs
index 3802ba3..7fda92f 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor.cs
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor.cs
@@ -1,6 +1,6 @@
-using GameIdeas.BlazorApp.Pages.Games.Models;
 using GameIdeas.BlazorApp.Shared.Components.Select.Models;
 using GameIdeas.BlazorApp.Shared.Components.SliderRange;
+using GameIdeas.BlazorApp.Shared.Models;
 using GameIdeas.Shared.Dto;
 using GameIdeas.Shared.Enum;
 using Microsoft.AspNetCore.Components;
@@ -10,7 +10,7 @@ namespace GameIdeas.BlazorApp.Pages.Games.Filter;
 
 public partial class GameFilter
 {
-    [Parameter] public GameFilterParams? GameFilterParams { get; set; }
+    [Parameter] public GameFilterParams GameFilterParams { get; set; } = new();
     [Parameter] public EventCallback<GameFilterParams> GameFilterParamsChanged { get; set; }
     [Parameter] public DisplayType DisplayType { get; set; }
     [Parameter] public EventCallback<DisplayType> DisplayTypeChanged { get; set; }
@@ -45,7 +45,7 @@ public partial class GameFilter
 
     protected override void OnInitialized()
     {
-        EditContext = new EditContext(GameFilterParams!);
+        EditContext = new EditContext(GameFilterParams);
         EditContext.OnFieldChanged += async (s, e) =>
         {
             await GameFilterParamsChanged.InvokeAsync(GameFilterParams);
@@ -54,7 +54,7 @@ public partial class GameFilter
 
     private void HandleSortTypeChanged(Func<GameDto?, object?> getHeader)
     {
-        GameFilterParams!.SortType = (SortType?)getHeader(null) ?? SortType.Ascending;
+        GameFilterParams.SortType = (SortType?)getHeader(null) ?? SortType.Ascending;
     }
 
     private async Task HandleDisplayClicked(DisplayType displayType)
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GamesBase.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GamesBase.razor
index 836cbb5..3da8b3f 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GamesBase.razor
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GamesBase.razor
@@ -1,20 +1,18 @@
 @page "/Games"
 @using GameIdeas.BlazorApp.Layouts
 @using GameIdeas.BlazorApp.Pages.Games.Filter
+@using GameIdeas.BlazorApp.Pages.Games.Header
 @using GameIdeas.BlazorApp.Shared.Components
-@using GameIdeas.BlazorApp.Shared.Layouts.Header
 @using GameIdeas.Resources
 
 @layout MainLayout
 
 <PageTitle>@ResourcesKey.GamesIdeas</PageTitle>
 
-<HeaderLayout>
-    <Body>
-        <GameFilter @bind-DisplayType=DisplayType
-                    @bind-GameFilterParams=GameFilterParams />
-    </Body>
-</HeaderLayout>
+<GamesHeader>
+    <GameFilter @bind-DisplayType=DisplayType
+                @bind-GameFilterParams=GameFilterParams />
+</GamesHeader>
 
 <div class="container">
     <div class="content">
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GamesBase.razor.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GamesBase.razor.cs
index 2909e73..0fcb9fa 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GamesBase.razor.cs
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GamesBase.razor.cs
@@ -1,5 +1,5 @@
 using GameIdeas.BlazorApp.Pages.Games.Filter;
-using GameIdeas.BlazorApp.Pages.Games.Models;
+using GameIdeas.BlazorApp.Shared.Models;
 
 namespace GameIdeas.BlazorApp.Pages.Games;
 
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GamesBase.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GamesBase.razor.css
index d1ba3fc..5dc75c2 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GamesBase.razor.css
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GamesBase.razor.css
@@ -1,5 +1,6 @@
 .container {
     margin-top: 20px;
+    margin-bottom: 10px;
     justify-content: space-between;
     display: flex;
     flex-direction: row;
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Layouts/Header/HeaderLayout.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Header/GamesHeader.razor
similarity index 79%
rename from src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Layouts/Header/HeaderLayout.razor
rename to src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Header/GamesHeader.razor
index 17f9cc6..c222be4 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Layouts/Header/HeaderLayout.razor
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Header/GamesHeader.razor
@@ -1,18 +1,18 @@
 @using GameIdeas.BlazorApp.Pages.Games
-@using GameIdeas.BlazorApp.Pages.Games.Models
 @using GameIdeas.BlazorApp.Shared.Components.Account
 @using GameIdeas.BlazorApp.Shared.Components.Select
 @using GameIdeas.BlazorApp.Shared.Components.Select.Models
+@using GameIdeas.BlazorApp.Shared.Models
 @using GameIdeas.Resources
 
-@inherits LayoutComponentBase
+@inherits ComponentBase
 
 <div class="header-tab">
     <div class="icon-container" @onclick="HandleIconClicked">
         <img src="icon.png" alt="Game Ideas">
     </div>
 
-    @Body
+    @ChildContent
 
     <div class="account-add-container">
         <div class="add-container">
@@ -27,13 +27,11 @@
                             ValueChanged=HandleAddTypeClickedAsync
                             Theme="SelectListTheme.Navigation"
                             AlignRight=true>
-                    <Button>
-                        <div class="second-button button">
-                            <svg class="button-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-                                <path d="M1 3H23L12 22" />
-                            </svg>
-                        </div>
-                    </Button>
+                    <div class="second-button button">
+                        <svg class="button-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                            <path d="M1 3H23L12 22" />
+                        </svg>
+                    </div>
                 </SelectList>
             </div>
         </div>
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Layouts/Header/HeaderLayout.razor.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Header/GamesHeader.razor.cs
similarity index 80%
rename from src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Layouts/Header/HeaderLayout.razor.cs
rename to src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Header/GamesHeader.razor.cs
index f3e335a..ee0a45e 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Layouts/Header/HeaderLayout.razor.cs
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Header/GamesHeader.razor.cs
@@ -1,14 +1,16 @@
-using GameIdeas.BlazorApp.Pages.Games.Models;
 using GameIdeas.BlazorApp.Shared.Components.Account;
 using GameIdeas.BlazorApp.Shared.Components.Select.Models;
+using GameIdeas.BlazorApp.Shared.Models;
 using GameIdeas.Resources;
 using Microsoft.AspNetCore.Components;
 
-namespace GameIdeas.BlazorApp.Shared.Layouts.Header;
+namespace GameIdeas.BlazorApp.Pages.Games.Header;
 
-public partial class HeaderLayout : LayoutComponentBase
+public partial class GamesHeader : ComponentBase
 {
     [Parameter] public EventCallback<AddType> AddTypeChanged { get; set; }
+    [Parameter] public RenderFragment? ChildContent { get; set; }
+
 
     private readonly IEnumerable<SelectElement<AddType>> SelectElements = [
         new SelectElement<AddType> { Item = AddType.Manual, Label = ResourcesKey.ManualAdd },
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Layouts/Header/HeaderLayout.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Header/GamesHeader.razor.css
similarity index 97%
rename from src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Layouts/Header/HeaderLayout.razor.css
rename to src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Header/GamesHeader.razor.css
index 013f027..a27186c 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Layouts/Header/HeaderLayout.razor.css
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Header/GamesHeader.razor.css
@@ -5,7 +5,6 @@
     align-items: flex-end;
     padding: 0px 10px;
     height: 40px;
-    z-index: var(--index-layout)
 }
 
 .icon-container {
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Models/AddType.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Models/AddType.cs
deleted file mode 100644
index d526be0..0000000
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Models/AddType.cs
+++ /dev/null
@@ -1,7 +0,0 @@
-namespace GameIdeas.BlazorApp.Pages.Games.Models;
-
-public enum AddType
-{
-    Manual,
-    Auto
-}
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Models/DisplayType.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Models/DisplayType.cs
deleted file mode 100644
index f3c0af4..0000000
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Models/DisplayType.cs
+++ /dev/null
@@ -1,7 +0,0 @@
-namespace GameIdeas.BlazorApp.Pages.Games.Models;
-
-public enum DisplayType
-{
-    Card,
-    List
-}
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor.css
index 2b6eddc..01ca8c0 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor.css
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor.css
@@ -13,6 +13,11 @@
     justify-content: space-between;
 }
 
+.buttons {
+    display: flex;
+    align-items: center;
+}
+
 ::deep .search-field {
     border: none !important;
     outline: none !important;
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor.cs
index 870cf7c..5c372af 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor.cs
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor.cs
@@ -24,6 +24,7 @@ public partial class MultipleSelectList<TItem>
         SearchInput?.SetText(string.Join(", ", Values));
 
         await ValuesChanged.InvokeAsync(Values);
+        StateHasChanged();
     }
 
     private async Task HandleTextChanged()
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectList.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectList.razor
index 0aee122..09b6230 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectList.razor
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectList.razor
@@ -1,15 +1,14 @@
-@using GameIdeas.BlazorApp.Shared.Components.Select.Components
+@using GameIdeas.BlazorApp.Shared.Components.BackdropFilter
+@using GameIdeas.BlazorApp.Shared.Components.Select.Components
 @typeparam TItem
 
 <div class="select-list" @onclick=HandleButtonClicked>
     <div class="select-button">
-        @Button
+        @ChildContent
     </div>
-    <div @ref=Container @onfocusout=HandleFocusOut
-        class="select-container @(AlignRight ? "align-right" : "")" 
-        tabindex="1000">
 
-        @if (ContentVisile)
+    <div class="select-container @(AlignRight ? "align-right" : "")">
+        @if (IsContentOpen)
         {
             <div class="select-content @(Enum.GetName(Theme)?.ToLower())">
                 @foreach (var item in Headers)
@@ -35,3 +34,6 @@
     </div>
 </div>
 
+<BackdropFilter AllowBodyScroll=true CloseOnClick=true Color="BackdropFilterColor.Transparent"
+                IsVisible=IsContentOpen OnClick="HandleContentClosed" />
+
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectList.razor.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectList.razor.cs
index 59423dd..ffcd07b 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectList.razor.cs
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectList.razor.cs
@@ -5,7 +5,7 @@ namespace GameIdeas.BlazorApp.Shared.Components.Select;
 
 public partial class SelectList<TItem> 
 {
-    [Parameter] public RenderFragment? Button { get; set; }
+    [Parameter] public RenderFragment? ChildContent { get; set; }
     [Parameter] public TItem? Value { get; set; }
     [Parameter] public EventCallback<TItem?> ValueChanged { get; set; }
     [Parameter] public TItem? Header { get; set; }
@@ -15,27 +15,16 @@ public partial class SelectList<TItem>
     [Parameter] public SelectListTheme Theme { get; set; }
     [Parameter] public bool AlignRight { get; set; }
 
-    private bool ContentVisile = false;
-    private DateTime ContentLastFocusOut = DateTime.Now;
-    private ElementReference Container;
+    private bool IsContentOpen = false;
 
-    public async Task OpenAsync()
+    private void HandleButtonClicked()
     {
-        if (DateTime.Now - ContentLastFocusOut >= TimeSpan.FromSeconds(0.2))
-        {
-            await Container.FocusAsync();
-            ContentVisile = true;
-        }
+        IsContentOpen = !IsContentOpen;
     }
 
-    public void Close() => ContentVisile = false;
-
-    private async Task HandleButtonClicked() => await OpenAsync();
-
-    private void HandleFocusOut()
+    private void HandleContentClosed()
     {
-        ContentLastFocusOut = DateTime.Now;
-        ContentVisile = false;
+        IsContentOpen = false;
     }
 
     private async Task HandleItemClicked(SelectElement<TItem> selectedValue)
@@ -46,6 +35,7 @@ public partial class SelectList<TItem>
         }
 
         selectedValue.IsSelected = true;
+
         Value = selectedValue.Item;
         await ValueChanged.InvokeAsync(Value);
     }
@@ -58,6 +48,7 @@ public partial class SelectList<TItem>
         }
 
         selectedValue.IsSelected = true;
+
         Header = selectedValue.Item;
         await HeaderChanged.InvokeAsync(Header);
     }
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Models/AddType.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Models/AddType.cs
new file mode 100644
index 0000000..6352879
--- /dev/null
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Models/AddType.cs
@@ -0,0 +1,7 @@
+namespace GameIdeas.BlazorApp.Shared.Models;
+
+public enum AddType
+{
+    Manual,
+    Auto
+}
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Models/DisplayType.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Models/DisplayType.cs
new file mode 100644
index 0000000..c7f3e5a
--- /dev/null
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Models/DisplayType.cs
@@ -0,0 +1,7 @@
+namespace GameIdeas.BlazorApp.Shared.Models;
+
+public enum DisplayType
+{
+    Card,
+    List
+}
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/css/app.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/css/app.css
index 95c1137..54720d9 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/css/app.css
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/css/app.css
@@ -22,7 +22,6 @@
     --index-background: -100;
     --index-orb: -1;
     --index-content: 0;
-    --index-layout: 100;
     --index-component: 300;
     --index-floating: 500;
     --index-backdrop: 700;
@@ -33,7 +32,8 @@
 html {
     font-family: 'Noto Sans', sans-serif;
     font-size: 12px;
-    color: var(--white)
+    color: var(--white);
+    overflow: hidden;
 }
 
 html, body, #app {
-- 
2.39.5


From c9473307f673032aa8de233549f6a94a3c4b5c95 Mon Sep 17 00:00:00 2001
From: Maxime Adler <madler@sqli.com>
Date: Tue, 8 Apr 2025 15:57:35 +0200
Subject: [PATCH 5/6] Fix multi select list height

---
 .../Games/Filter/AdvancedGameFilter.razor.cs  | 93 +++++++++++++++++++
 .../Select/MultipleSelectList.razor.cs        | 10 ++
 .../Select/MultipleSelectList.razor.css       | 27 +++++-
 .../Select/MultipleSelectList.razor.js        | 19 ++++
 .../GameIdeas.BlazorApp/wwwroot/index.html    |  2 +
 5 files changed, 148 insertions(+), 3 deletions(-)
 create mode 100644 src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor.js

diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/AdvancedGameFilter.razor.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/AdvancedGameFilter.razor.cs
index adfddfd..dc99931 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/AdvancedGameFilter.razor.cs
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/AdvancedGameFilter.razor.cs
@@ -28,6 +28,99 @@ public partial class AdvancedGameFilter
         new() { Item = "Ubisoft", Label = "Ubisoft" },
         new() { Item = "Activision Blizzard", Label = "Activision Blizzard" },
         new() { Item = "Bethesda", Label = "Bethesda" },
+        new() { Item = "Bethesda", Label = "Bethesda" },
+        new() { Item = "Bethesda", Label = "Bethesda" },
+        new() { Item = "Bethesda", Label = "Bethesda" },
+        new() { Item = "Bethesda", Label = "Bethesda" },
+        new() { Item = "Bethesda", Label = "Bethesda" },
+        new() { Item = "Bethesda", Label = "Bethesda" },
+        new() { Item = "Bethesda", Label = "Bethesda" },
+        new() { Item = "Bethesda", Label = "Bethesda" },
+        new() { Item = "Bethesda", Label = "Bethesda" },
+        new() { Item = "Bethesda", Label = "Bethesda" },
+        new() { Item = "Bethesda", Label = "Bethesda" },
+        new() { Item = "Bethesda", Label = "Bethesda" },
+        new() { Item = "Bethesda", Label = "Bethesda" },
+        new() { Item = "Bethesda", Label = "Bethesda" },
+        new() { Item = "Bethesda", Label = "Bethesda" },
+        new() { Item = "Bethesda", Label = "Bethesda" },
+        new() { Item = "Bethesda", Label = "Bethesda" },
+        new() { Item = "Bethesda", Label = "Bethesda" },
+        new() { Item = "Bethesda", Label = "Bethesda" },
+        new() { Item = "Bethesda", Label = "Bethesda" },
+        new() { Item = "Bethesda", Label = "Bethesda" },
+        new() { Item = "Bethesda", Label = "Bethesda" },
+        new() { Item = "Bethesda", Label = "Bethesda" },
+        new() { Item = "Bethesda", Label = "Bethesda" },
+        new() { Item = "Bethesda", Label = "Bethesda" },
+        new() { Item = "Bethesda", Label = "Bethesda" },
+        new() { Item = "Bethesda", Label = "Bethesda" },
+        new() { Item = "Bethesda", Label = "Bethesda" },
+        new() { Item = "Bethesda", Label = "Bethesda" },
+        new() { Item = "Bethesda", Label = "Bethesda" },
+        new() { Item = "Bethesda", Label = "Bethesda" },
+        new() { Item = "Bethesda", Label = "Bethesda" },
+        new() { Item = "Bethesda", Label = "Bethesda" },
+        new() { Item = "Bethesda", Label = "Bethesda" },
+        new() { Item = "Bethesda", Label = "Bethesda" },
+        new() { Item = "Bethesda", Label = "Bethesda" },
+        new() { Item = "Bethesda", Label = "Bethesda" },
+        new() { Item = "Bethesda", Label = "Bethesda" },
+        new() { Item = "Bethesda", Label = "Bethesda" },
+        new() { Item = "Bethesda", Label = "Bethesda" },
+        new() { Item = "Bethesda", Label = "Bethesda" },
+        new() { Item = "Bethesda", Label = "Bethesda" },
+        new() { Item = "Bethesda", Label = "Bethesda" },
+        new() { Item = "Bethesda", Label = "Bethesda" },
+        new() { Item = "Bethesda", Label = "Bethesda" },
+        new() { Item = "Bethesda", Label = "Bethesda" },
+        new() { Item = "Bethesda", Label = "Bethesda" },
+        new() { Item = "Bethesda", Label = "Bethesda" },
+        new() { Item = "Bethesda", Label = "Bethesda" },
+        new() { Item = "Bethesda", Label = "Bethesda" },
+        new() { Item = "Bethesda", Label = "Bethesda" },
+        new() { Item = "Bethesda", Label = "Bethesda" },
+        new() { Item = "Bethesda", Label = "Bethesda" },
+        new() { Item = "Bethesda", Label = "Bethesda" },
+        new() { Item = "Bethesda", Label = "Bethesda" },
+        new() { Item = "Bethesda", Label = "Bethesda" },
+        new() { Item = "Bethesda", Label = "Bethesda" },
+        new() { Item = "Bethesda", Label = "Bethesda" },
+        new() { Item = "Bethesda", Label = "Bethesda" },
+        new() { Item = "Bethesda", Label = "Bethesda" },
+        new() { Item = "Bethesda", Label = "Bethesda" },
+        new() { Item = "Bethesda", Label = "Bethesda" },
+        new() { Item = "Bethesda", Label = "Bethesda" },
+        new() { Item = "Bethesda", Label = "Bethesda" },
+        new() { Item = "Bethesda", Label = "Bethesda" },
+        new() { Item = "Bethesda", Label = "Bethesda" },
+        new() { Item = "Bethesda", Label = "Bethesda" },
+        new() { Item = "Bethesda", Label = "Bethesda" },
+        new() { Item = "Bethesda", Label = "Bethesda" },
+        new() { Item = "Bethesda", Label = "Bethesda" },
+        new() { Item = "Bethesda", Label = "Bethesda" },
+        new() { Item = "Bethesda", Label = "Bethesda" },
+        new() { Item = "Bethesda", Label = "Bethesda" },
+        new() { Item = "Bethesda", Label = "Bethesda" },
+        new() { Item = "Bethesda", Label = "Bethesda" },
+        new() { Item = "Bethesda", Label = "Bethesda" },
+        new() { Item = "Bethesda", Label = "Bethesda" },
+        new() { Item = "Bethesda", Label = "Bethesda" },
+        new() { Item = "Bethesda", Label = "Bethesda" },
+        new() { Item = "Bethesda", Label = "Bethesda" },
+        new() { Item = "Bethesda", Label = "Bethesda" },
+        new() { Item = "Bethesda", Label = "Bethesda" },
+        new() { Item = "Bethesda", Label = "Bethesda" },
+        new() { Item = "Bethesda", Label = "Bethesda" },
+        new() { Item = "Bethesda", Label = "Bethesda" },
+        new() { Item = "Bethesda", Label = "Bethesda" },
+        new() { Item = "Bethesda", Label = "Bethesda" },
+        new() { Item = "Bethesda", Label = "Bethesda" },
+        new() { Item = "Bethesda", Label = "Bethesda" },
+        new() { Item = "Bethesda", Label = "Bethesda" },
+        new() { Item = "Bethesda", Label = "Bethesda" },
+        new() { Item = "Bethesda", Label = "Bethesda" },
+        new() { Item = "Bethesda", Label = "Bethesda" },
     ];
 
     private readonly IEnumerable<SelectElement<string>> Developers = [
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor.cs
index 5c372af..def2a83 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor.cs
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor.cs
@@ -1,11 +1,13 @@
 using GameIdeas.BlazorApp.Shared.Components.Search;
 using GameIdeas.BlazorApp.Shared.Components.Select.Models;
 using Microsoft.AspNetCore.Components;
+using Microsoft.JSInterop;
 
 namespace GameIdeas.BlazorApp.Shared.Components.Select;
 
 public partial class MultipleSelectList<TItem>
 {
+    [Inject] IJSRuntime JS { get; set; } = default!;
     [Parameter] public IEnumerable<TItem>? Values { get; set; }
     [Parameter] public EventCallback<IEnumerable<TItem>?> ValuesChanged { get; set; }
     [Parameter] public IEnumerable<SelectElement<TItem>> Items { get; set; } = [];
@@ -16,6 +18,14 @@ public partial class MultipleSelectList<TItem>
     private bool IsContentOpen = false;
     private SearchInput? SearchInput;
 
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        await JS.InvokeVoidAsync("addResizeListener");
+
+        await base.OnAfterRenderAsync(firstRender);
+    }
+
     private async Task HandleItemClicked(SelectElement<TItem> selectedValue)
     {
         selectedValue.IsSelected = !selectedValue.IsSelected;
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor.css
index b229fa7..db31296 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor.css
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor.css
@@ -8,14 +8,13 @@
     min-width: 100%;
     margin-top: 4px;
     position: absolute;
-    z-index: var(--index-dropdown)
+    z-index: var(--index-dropdown);
+    border-radius: var(--small-radius);
 }
 
 .select-content {
-    overflow: hidden;
     display: flex;
     flex-direction: column;
-    border-radius: var(--small-radius);
     animation-name: fade-in;
     animation-duration: 0.4s;
     background: var(--dropdown-content);
@@ -41,3 +40,25 @@
     color: #bbb;
 }
 
+/* width */
+.select-container::-webkit-scrollbar {
+    width: 10px;
+}
+
+/* Track */
+.select-container::-webkit-scrollbar-track {
+    background: var(--input-secondary);
+    border-radius: 0 var(--small-radius) var(--small-radius) 0;
+}
+
+/* Handle */
+.select-container::-webkit-scrollbar-thumb {
+    background: #555;
+    border-radius: var(--small-radius);
+}
+
+    /* Handle on hover */
+    .select-container::-webkit-scrollbar-thumb:hover {
+        background: #777;
+    }
+
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor.js b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor.js
new file mode 100644
index 0000000..3506868
--- /dev/null
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor.js
@@ -0,0 +1,19 @@
+function offset(el) {
+    var rect = el.getBoundingClientRect(),
+        scrollLeft = window.scrollY || document.documentElement.scrollLeft,
+        scrollTop = window.scrollX || document.documentElement.scrollTop;
+    return { top: rect.top + scrollTop, left: rect.left + scrollLeft }
+}
+
+function resizeSelectContent() {
+    const height = window.innerHeight;
+    const selects = document.getElementsByClassName('select-container');
+    for (var i = 0; i < selects.length; i++) {
+        selects[i].style.maxHeight = height - offset(selects[i]).top - 10 + "px";
+    }
+}
+
+window.addResizeListener = () => {
+    resizeSelectContent();
+    window.addEventListener('resize', resizeSelectContent);
+};
\ No newline at end of file
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/index.html b/src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/index.html
index 4d324bb..13a0479 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/index.html
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/index.html
@@ -26,6 +26,8 @@
         <span class="dismiss">🗙</span>
     </div>
     <script src="_framework/blazor.webassembly.js"></script>
+    <script src="Shared/Components/BackdropFilter/BackdropFilter.razor.js"></script>
+    <script src="Shared/Components/Select/MultipleSelectList.razor.js"></script>
 </body>
 
 </html>
-- 
2.39.5


From 40a1a7e4e781633eff2fb9812df055a7806846f1 Mon Sep 17 00:00:00 2001
From: Maxime Adler <madler@sqli.com>
Date: Tue, 8 Apr 2025 16:04:02 +0200
Subject: [PATCH 6/6] fix select list close

---
 .../Games/Filter/AdvancedGameFilter.razor.cs  | 95 +------------------
 .../Shared/Components/Select/SelectList.razor |  4 +-
 2 files changed, 3 insertions(+), 96 deletions(-)

diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/AdvancedGameFilter.razor.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/AdvancedGameFilter.razor.cs
index dc99931..dfa5e1b 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/AdvancedGameFilter.razor.cs
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/AdvancedGameFilter.razor.cs
@@ -27,100 +27,7 @@ public partial class AdvancedGameFilter
         new() { Item = "Electronic Arts", Label = "Electronic Arts" },
         new() { Item = "Ubisoft", Label = "Ubisoft" },
         new() { Item = "Activision Blizzard", Label = "Activision Blizzard" },
-        new() { Item = "Bethesda", Label = "Bethesda" },
-        new() { Item = "Bethesda", Label = "Bethesda" },
-        new() { Item = "Bethesda", Label = "Bethesda" },
-        new() { Item = "Bethesda", Label = "Bethesda" },
-        new() { Item = "Bethesda", Label = "Bethesda" },
-        new() { Item = "Bethesda", Label = "Bethesda" },
-        new() { Item = "Bethesda", Label = "Bethesda" },
-        new() { Item = "Bethesda", Label = "Bethesda" },
-        new() { Item = "Bethesda", Label = "Bethesda" },
-        new() { Item = "Bethesda", Label = "Bethesda" },
-        new() { Item = "Bethesda", Label = "Bethesda" },
-        new() { Item = "Bethesda", Label = "Bethesda" },
-        new() { Item = "Bethesda", Label = "Bethesda" },
-        new() { Item = "Bethesda", Label = "Bethesda" },
-        new() { Item = "Bethesda", Label = "Bethesda" },
-        new() { Item = "Bethesda", Label = "Bethesda" },
-        new() { Item = "Bethesda", Label = "Bethesda" },
-        new() { Item = "Bethesda", Label = "Bethesda" },
-        new() { Item = "Bethesda", Label = "Bethesda" },
-        new() { Item = "Bethesda", Label = "Bethesda" },
-        new() { Item = "Bethesda", Label = "Bethesda" },
-        new() { Item = "Bethesda", Label = "Bethesda" },
-        new() { Item = "Bethesda", Label = "Bethesda" },
-        new() { Item = "Bethesda", Label = "Bethesda" },
-        new() { Item = "Bethesda", Label = "Bethesda" },
-        new() { Item = "Bethesda", Label = "Bethesda" },
-        new() { Item = "Bethesda", Label = "Bethesda" },
-        new() { Item = "Bethesda", Label = "Bethesda" },
-        new() { Item = "Bethesda", Label = "Bethesda" },
-        new() { Item = "Bethesda", Label = "Bethesda" },
-        new() { Item = "Bethesda", Label = "Bethesda" },
-        new() { Item = "Bethesda", Label = "Bethesda" },
-        new() { Item = "Bethesda", Label = "Bethesda" },
-        new() { Item = "Bethesda", Label = "Bethesda" },
-        new() { Item = "Bethesda", Label = "Bethesda" },
-        new() { Item = "Bethesda", Label = "Bethesda" },
-        new() { Item = "Bethesda", Label = "Bethesda" },
-        new() { Item = "Bethesda", Label = "Bethesda" },
-        new() { Item = "Bethesda", Label = "Bethesda" },
-        new() { Item = "Bethesda", Label = "Bethesda" },
-        new() { Item = "Bethesda", Label = "Bethesda" },
-        new() { Item = "Bethesda", Label = "Bethesda" },
-        new() { Item = "Bethesda", Label = "Bethesda" },
-        new() { Item = "Bethesda", Label = "Bethesda" },
-        new() { Item = "Bethesda", Label = "Bethesda" },
-        new() { Item = "Bethesda", Label = "Bethesda" },
-        new() { Item = "Bethesda", Label = "Bethesda" },
-        new() { Item = "Bethesda", Label = "Bethesda" },
-        new() { Item = "Bethesda", Label = "Bethesda" },
-        new() { Item = "Bethesda", Label = "Bethesda" },
-        new() { Item = "Bethesda", Label = "Bethesda" },
-        new() { Item = "Bethesda", Label = "Bethesda" },
-        new() { Item = "Bethesda", Label = "Bethesda" },
-        new() { Item = "Bethesda", Label = "Bethesda" },
-        new() { Item = "Bethesda", Label = "Bethesda" },
-        new() { Item = "Bethesda", Label = "Bethesda" },
-        new() { Item = "Bethesda", Label = "Bethesda" },
-        new() { Item = "Bethesda", Label = "Bethesda" },
-        new() { Item = "Bethesda", Label = "Bethesda" },
-        new() { Item = "Bethesda", Label = "Bethesda" },
-        new() { Item = "Bethesda", Label = "Bethesda" },
-        new() { Item = "Bethesda", Label = "Bethesda" },
-        new() { Item = "Bethesda", Label = "Bethesda" },
-        new() { Item = "Bethesda", Label = "Bethesda" },
-        new() { Item = "Bethesda", Label = "Bethesda" },
-        new() { Item = "Bethesda", Label = "Bethesda" },
-        new() { Item = "Bethesda", Label = "Bethesda" },
-        new() { Item = "Bethesda", Label = "Bethesda" },
-        new() { Item = "Bethesda", Label = "Bethesda" },
-        new() { Item = "Bethesda", Label = "Bethesda" },
-        new() { Item = "Bethesda", Label = "Bethesda" },
-        new() { Item = "Bethesda", Label = "Bethesda" },
-        new() { Item = "Bethesda", Label = "Bethesda" },
-        new() { Item = "Bethesda", Label = "Bethesda" },
-        new() { Item = "Bethesda", Label = "Bethesda" },
-        new() { Item = "Bethesda", Label = "Bethesda" },
-        new() { Item = "Bethesda", Label = "Bethesda" },
-        new() { Item = "Bethesda", Label = "Bethesda" },
-        new() { Item = "Bethesda", Label = "Bethesda" },
-        new() { Item = "Bethesda", Label = "Bethesda" },
-        new() { Item = "Bethesda", Label = "Bethesda" },
-        new() { Item = "Bethesda", Label = "Bethesda" },
-        new() { Item = "Bethesda", Label = "Bethesda" },
-        new() { Item = "Bethesda", Label = "Bethesda" },
-        new() { Item = "Bethesda", Label = "Bethesda" },
-        new() { Item = "Bethesda", Label = "Bethesda" },
-        new() { Item = "Bethesda", Label = "Bethesda" },
-        new() { Item = "Bethesda", Label = "Bethesda" },
-        new() { Item = "Bethesda", Label = "Bethesda" },
-        new() { Item = "Bethesda", Label = "Bethesda" },
-        new() { Item = "Bethesda", Label = "Bethesda" },
-        new() { Item = "Bethesda", Label = "Bethesda" },
-        new() { Item = "Bethesda", Label = "Bethesda" },
-        new() { Item = "Bethesda", Label = "Bethesda" },
+        new() { Item = "Bethesda", Label = "Bethesda" }
     ];
 
     private readonly IEnumerable<SelectElement<string>> Developers = [
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectList.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectList.razor
index 09b6230..3dc72ce 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectList.razor
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectList.razor
@@ -2,8 +2,8 @@
 @using GameIdeas.BlazorApp.Shared.Components.Select.Components
 @typeparam TItem
 
-<div class="select-list" @onclick=HandleButtonClicked>
-    <div class="select-button">
+<div class="select-list">
+    <div class="select-button" @onclick=HandleButtonClicked>
         @ChildContent
     </div>
 
-- 
2.39.5