Use strategy fixed for dropdown menus, so they dont get clipped by an overflow: hidden

This fixes issue #209

assets/js/register_events.js

@@ -19,15 +19,17 @@
 
 'use strict';
 
+import {Dropdown} from "bootstrap";
+
 class RegisterEventHelper {
     constructor() {
         this.registerTooltips();
+        this.configureDropdowns();
         this.registerSpecialCharInput();
 
-        this.registerModalDropRemovalOnFormSubmit()
+        this.registerModalDropRemovalOnFormSubmit();
     }
 
-
     registerModalDropRemovalOnFormSubmit() {
         //Remove all modal backdrops, before rendering the new page.
         document.addEventListener('turbo:before-render', event => {
@@ -40,6 +42,19 @@ class RegisterEventHelper {
         document.addEventListener('turbo:load', fn);
     }
 
+    configureDropdowns() {
+        this.registerLoadHandler(() => {
+            //Set the dropdown strategy to fixed, so that the dropdowns are not cut off by the overflow: hidden of the body.
+            //Solution from: https://github.com/twbs/bootstrap/issues/36560
+            const dropdowns = document.querySelectorAll('[data-bs-toggle="dropdown"]');
+            const dropdown = [...dropdowns].map((dropdownToggleEl) => new Dropdown(dropdownToggleEl, {
+                popperConfig(defaultBsPopperConfig) {
+                    return { ...defaultBsPopperConfig, strategy: 'fixed' };
+                }
+            }));
+        });
+    }
+
     registerTooltips() {
         this.registerLoadHandler(() => {
             $(".tooltip").remove();