Fix multi select list height

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 = [

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;

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;
+    }
+

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);
+};

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>