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

diff --git a/resources/js/components/dropdown.js b/resources/js/components/dropdown.js
index 2c5919a37e755d9fa8e3facc0a8f226612dff468..4efd428acf72b408dc4867e94a203173ed06c049 100644 (file)
--- a/resources/js/components/dropdown.js
+++ b/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;
         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) {
 
         // 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`;
         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';
         } 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
         }
 
         // 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.toggle.setAttribute('aria-expanded', 'false');
         this.menu.style.top = '';
         this.menu.style.bottom = '';

+        this.menu.style.maxHeight = '';

 
         if (this.moveMenu) {
             this.menu.style.position = '';
 
         if (this.moveMenu) {
             this.menu.style.position = '';

diff --git a/resources/sass/_lists.scss b/resources/sass/_lists.scss
index 299bfbc335e22a57602b8ba7d9eef566ae3873fd..865b503c83e1313bad874ecec0aa3d627c9a4dbb 100644 (file)
--- a/resources/sass/_lists.scss
+++ b/resources/sass/_lists.scss
@@ -672,7 +672,7 @@ ul.pagination {
   @include lightDark(color, #555, #eee);
   fill: currentColor;
   text-align: start !important;
   @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;
   overflow-y: auto;
   &.anchor-left {
     inset-inline-end: auto;

diff --git a/resources/views/settings/audit.blade.php b/resources/views/settings/audit.blade.php
index 9f0572c1ab400f7209d2d0a8f5dc48ab97145039..89d743fdc7ca2afa4679e640697069f46dbebe82 100644 (file)
--- a/resources/views/settings/audit.blade.php
+++ b/resources/views/settings/audit.blade.php
@@ -16,7 +16,7 @@
                     <input type="hidden" name="{{ $key }}" value="{{ $val }}">
                 @endforeach
 
                     <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"
                     <label for="">{{ trans('settings.audit_event_filter') }}</label>
                     <button refs="dropdown@toggle"
                             type="button"