Try mobile no flip modifier

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

@@ -1,7 +1,11 @@
 import { Options } from '@popperjs/core'
 import { pngxPopperOptions } from './popper-options'
 
-describe('popperOptionsReenablePreventOverflow', () => {
+describe('pngxPopperOptions', () => {
+  afterEach(() => {
+    jest.restoreAllMocks()
+  })
+
   it('should return the config with add padding', () => {
     const config: Partial<Options> = {
       modifiers: [
@@ -20,4 +24,55 @@ describe('popperOptionsReenablePreventOverflow', () => {
     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

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

src-ui/src/index.html

@@ -4,7 +4,7 @@
   <meta charset="utf-8">
   <title>Paperless-ngx</title>
   <base href="/">
-  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, interactive-widget=resizes-content">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
   <meta name="color-scheme" content="dark light">
   <meta name="theme-color" content="#17541f" />
   <link rel="manifest" href="manifest.webmanifest">