Overflow dropdown menu

gdn-app/src/components/NavbarDropdown.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useReposStore } from "@/stores/repos";
-import { offset, useFloating } from "@floating-ui/vue";
+import { offset, size, useFloating } from "@floating-ui/vue";
 import {
   RiAddLine,
   RiArrowDropDownLine,
@@ -18,7 +18,14 @@ const reference = useTemplateRef("reference");
 const floating = useTemplateRef("floating");
 const { floatingStyles } = useFloating(reference, floating, {
   placement: "bottom-start",
-  middleware: [offset(4)],
+  middleware: [
+    offset(4),
+    size({
+      apply({ availableHeight, elements }) {
+        elements.floating.style.maxHeight = `${Math.max(100, availableHeight)}px`;
+      },
+    }),
+  ],
 });
 
 function onAddNewRepo() {
@@ -65,7 +72,7 @@ function onSelectRepo(id: string) {
   <div
     v-if="open"
     ref="floating"
-    class="absolute left-0 top-0 w-fit min-w-48 rounded-md bg-neutral-800 font-light"
+    class="absolute left-0 top-0 w-fit min-w-48 overflow-auto rounded-md bg-neutral-800 font-light"
     :style="floatingStyles"
   >
     <NavbarDropdownEntry