Dropdowns: Fixed bad direction logic, added dynmaic height

Changes since adding notifications would cause direction to be assessed
upon max height of 80vh, which caused large dropdowns like the audit log
dropdown to drop up and/or go offscreen.
This restores the default assessment of 500px, and adds dynamic
max-height adjustment to provide more room for large dropdowns.

For #4652

Author: ssddanbrown

resources/js/components/dropdown.js

@@ -34,6 +34,7 @@ export class Dropdown extends Component {
         let heightOffset = 0;
         const toggleHeight = this.toggle.getBoundingClientRect().height;
         const dropUpwards = menuOriginalRect.bottom > window.innerHeight;
+        const containerRect = this.container.getBoundingClientRect();
 
         // If enabled, Move to body to prevent being trapped within scrollable sections
         if (this.moveMenu) {
@@ -52,9 +53,13 @@ export class Dropdown extends Component {
         if (dropUpwards) {
             this.menu.style.top = 'initial';
             this.menu.style.bottom = `${heightOffset}px`;
+            const maxHeight = (window.innerHeight - 40) - (window.innerHeight - containerRect.bottom);
+            this.menu.style.maxHeight = `${Math.floor(maxHeight)}px`;
         } else {
             this.menu.style.top = `${heightOffset}px`;
             this.menu.style.bottom = 'initial';
+            const maxHeight = (window.innerHeight - 40) - containerRect.top;
+            this.menu.style.maxHeight = `${Math.floor(maxHeight)}px`;
         }
 
         // Set listener to hide on mouse leave or window click
@@ -91,6 +96,7 @@ export class Dropdown extends Component {
         this.toggle.setAttribute('aria-expanded', 'false');
         this.menu.style.top = '';
         this.menu.style.bottom = '';
+        this.menu.style.maxHeight = '';
 
         if (this.moveMenu) {
             this.menu.style.position = '';

resources/sass/_lists.scss

@@ -672,7 +672,7 @@ ul.pagination {
   @include lightDark(color, #555, #eee);
   fill: currentColor;
   text-align: start !important;
-  max-height: 80vh;
+  max-height: 500px;
   overflow-y: auto;
   &.anchor-left {
     inset-inline-end: auto;

resources/views/settings/audit.blade.php

@@ -16,7 +16,7 @@ class="flex-container-row wrap justify-flex-start gap-x-m gap-y-xs">
                     <input type="hidden" name="{{ $key }}" value="{{ $val }}">
                 @endforeach
 
-                <div component="dropdown" class="list-sort-type dropdown-container">
+                <div component="dropdown" class="list-sort-type dropdown-container relative">
                     <label for="">{{ trans('settings.audit_event_filter') }}</label>
                     <button refs="dropdown@toggle"
                             type="button"