diff --git a/src-ui/src/app/components/document-list/document-list.component.scss b/src-ui/src/app/components/document-list/document-list.component.scss index 06f4c4531..ce763c55f 100644 --- a/src-ui/src/app/components/document-list/document-list.component.scss +++ b/src-ui/src/app/components/document-list/document-list.component.scss @@ -64,6 +64,13 @@ $paperless-card-breakpoints: ( } } +// Popper may place a dropdown above its toggle when the virtual keyboard +// reduces the available viewport. Raise the toolbar while a menu is open so +// the menu isn't obscured by the fixed navbar. +:host ::ng-deep .sticky-top:has(.dropdown-menu.show) { + z-index: 1040; +} + @media (max-width: 579.98px) { :host-context(main.mobile-search-hidden) .sticky-top { top: calc(3.5rem - 2px); // height of navbar only when search is hidden diff --git a/src-ui/src/app/utils/popper-options.spec.ts b/src-ui/src/app/utils/popper-options.spec.ts index c7c31d5f0..b8592d8c9 100644 --- a/src-ui/src/app/utils/popper-options.spec.ts +++ b/src-ui/src/app/utils/popper-options.spec.ts @@ -1,11 +1,7 @@ import { Options } from '@popperjs/core' import { pngxPopperOptions } from './popper-options' -describe('pngxPopperOptions', () => { - afterEach(() => { - jest.restoreAllMocks() - }) - +describe('popperOptionsReenablePreventOverflow', () => { it('should return the config with add padding', () => { const config: Partial = { modifiers: [ @@ -24,55 +20,4 @@ describe('pngxPopperOptions', () => { expect(result.modifiers[0].name).toBe('preventOverflow') expect(result.modifiers[0].options).toEqual({ padding: 10 }) }) - - it('should keep dropdown fallbacks on the same side on mobile', () => { - jest.spyOn(window, 'matchMedia').mockReturnValue({ - matches: true, - } as MediaQueryList) - const config: Partial = { - placement: 'bottom-start', - modifiers: [ - { - name: 'flip', - fn: function (arg0) { - return - }, - options: { - fallbackPlacements: ['bottom-end', 'top-start', 'top-end'], - }, - }, - ], - } - - const result = pngxPopperOptions(config) - - expect(result.modifiers[0].options.fallbackPlacements).toEqual([ - 'bottom-end', - ]) - }) - - it('should retain all dropdown fallbacks outside mobile layouts', () => { - jest.spyOn(window, 'matchMedia').mockReturnValue({ - matches: false, - } as MediaQueryList) - const fallbackPlacements = ['bottom-end', 'top-start', 'top-end'] - const config: Partial = { - placement: 'bottom-start', - modifiers: [ - { - name: 'flip', - fn: function (arg0) { - return - }, - options: { fallbackPlacements }, - }, - ], - } - - const result = pngxPopperOptions(config) - - expect(result.modifiers[0].options.fallbackPlacements).toEqual( - fallbackPlacements - ) - }) }) diff --git a/src-ui/src/app/utils/popper-options.ts b/src-ui/src/app/utils/popper-options.ts index ebd147c47..27e935f36 100644 --- a/src-ui/src/app/utils/popper-options.ts +++ b/src-ui/src/app/utils/popper-options.ts @@ -10,20 +10,5 @@ export function pngxPopperOptions(config: Partial): Partial { } } - const flipModifier = config.modifiers.find((m) => m.name === 'flip') - const placementSide = config.placement?.split('-')[0] - if ( - flipModifier && - placementSide && - window.matchMedia('(max-width: 575.98px)').matches - ) { - flipModifier.options = { - ...flipModifier.options, - fallbackPlacements: ( - flipModifier.options?.fallbackPlacements ?? [] - ).filter((placement) => placement.startsWith(placementSide)), - } - } - return config }