Skip to content

Commit fa6ac21

Browse files
committed
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
1 parent ea0469e commit fa6ac21

File tree

3 files changed

+8
-2
lines changed

3 files changed

+8
-2
lines changed

resources/js/components/dropdown.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ export class Dropdown extends Component {
3434
let heightOffset = 0;
3535
const toggleHeight = this.toggle.getBoundingClientRect().height;
3636
const dropUpwards = menuOriginalRect.bottom > window.innerHeight;
37+
const containerRect = this.container.getBoundingClientRect();
3738

3839
// If enabled, Move to body to prevent being trapped within scrollable sections
3940
if (this.moveMenu) {
@@ -52,9 +53,13 @@ export class Dropdown extends Component {
5253
if (dropUpwards) {
5354
this.menu.style.top = 'initial';
5455
this.menu.style.bottom = `${heightOffset}px`;
56+
const maxHeight = (window.innerHeight - 40) - (window.innerHeight - containerRect.bottom);
57+
this.menu.style.maxHeight = `${Math.floor(maxHeight)}px`;
5558
} else {
5659
this.menu.style.top = `${heightOffset}px`;
5760
this.menu.style.bottom = 'initial';
61+
const maxHeight = (window.innerHeight - 40) - containerRect.top;
62+
this.menu.style.maxHeight = `${Math.floor(maxHeight)}px`;
5863
}
5964

6065
// Set listener to hide on mouse leave or window click
@@ -91,6 +96,7 @@ export class Dropdown extends Component {
9196
this.toggle.setAttribute('aria-expanded', 'false');
9297
this.menu.style.top = '';
9398
this.menu.style.bottom = '';
99+
this.menu.style.maxHeight = '';
94100

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

resources/sass/_lists.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -672,7 +672,7 @@ ul.pagination {
672672
@include lightDark(color, #555, #eee);
673673
fill: currentColor;
674674
text-align: start !important;
675-
max-height: 80vh;
675+
max-height: 500px;
676676
overflow-y: auto;
677677
&.anchor-left {
678678
inset-inline-end: auto;

resources/views/settings/audit.blade.php

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ class="flex-container-row wrap justify-flex-start gap-x-m gap-y-xs">
1616
<input type="hidden" name="{{ $key }}" value="{{ $val }}">
1717
@endforeach
1818

19-
<div component="dropdown" class="list-sort-type dropdown-container">
19+
<div component="dropdown" class="list-sort-type dropdown-container relative">
2020
<label for="">{{ trans('settings.audit_event_filter') }}</label>
2121
<button refs="dropdown@toggle"
2222
type="button"

0 commit comments

Comments
 (0)