Actually just try z-index

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

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<Options> = {
       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<Options> = {
-      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<Options> = {
-      placement: 'bottom-start',
-      modifiers: [
-        {
-          name: 'flip',
-          fn: function (arg0) {
-            return
-          },
-          options: { fallbackPlacements },
-        },
-      ],
-    }
-
-    const result = pngxPopperOptions(config)
-
-    expect(result.modifiers[0].options.fallbackPlacements).toEqual(
-      fallbackPlacements
-    )
-  })
 })

src-ui/src/app/utils/popper-options.ts

@@ -10,20 +10,5 @@ export function pngxPopperOptions(config: Partial<Options>): Partial<Options> {
     }
   }
 
-  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
 }