From a2554801959880ea46b22b1c7b23381e2d2cea01 Mon Sep 17 00:00:00 2001
From: Pierre-Olivier Mercier <nemunaire@nemunai.re>
Date: Tue, 31 Aug 2021 21:50:26 +0200
Subject: [PATCH] ui: Ensure themes menu kept in screen

---
 frontend/ui/src/components/NavThemes.svelte | 43 +++++++++++++--------
 1 file changed, 26 insertions(+), 17 deletions(-)

diff --git a/frontend/ui/src/components/NavThemes.svelte b/frontend/ui/src/components/NavThemes.svelte
index a225cda7..47539a5b 100644
--- a/frontend/ui/src/components/NavThemes.svelte
+++ b/frontend/ui/src/components/NavThemes.svelte
@@ -19,23 +19,32 @@
         Scénarii
     </DropdownToggle>
     <DropdownMenu class="niceborder" end>
-        {#each Object.keys($themes) as th, index}
-            <DropdownItem href="/{$themes[th].urlid}">
-                {$themes[th].name}
-                {#if $max_solved > 1 && $themes[th].solved == $max_solved}
-                    <Badge color="danger">
-                        <Icon name="heart-fill" />
+        <div>
+            {#each Object.keys($themes) as th, index}
+                <DropdownItem href="/{$themes[th].urlid}">
+                    {$themes[th].name}
+                    {#if $max_solved > 1 && $themes[th].solved == $max_solved}
+                        <Badge color="danger">
+                            <Icon name="heart-fill" />
+                        </Badge>
+                    {/if}
+                    {#if $themes[th].exercice_coeff_max > 1}
+                        <Badge color="success">
+                            <Icon name="gift-fill" />
+                        </Badge>
+                    {/if}
+                    <Badge>
+                        {#if $my && $my.team_id}{$myThemes[$themes[th].id].exercice_solved}/{/if}{$themes[th].exercice_count}
                     </Badge>
-                {/if}
-                {#if $themes[th].exercice_coeff_max > 1}
-                    <Badge color="success">
-                        <Icon name="gift-fill" />
-                    </Badge>
-                {/if}
-                <Badge>
-                    {#if $my && $my.team_id}{$myThemes[$themes[th].id].exercice_solved}/{/if}{$themes[th].exercice_count}
-                </Badge>
-            </DropdownItem>
-        {/each}
+                </DropdownItem>
+            {/each}
+        </div>
     </DropdownMenu>
 </Dropdown>
+
+<style>
+ div {
+     overflow-y: auto;
+     max-height: calc(80vh - 100px);
+ }
+</style>