Make the popover positioning strategy configurable

src/components/VFilters/VFilterChecklist.vue

@@ -24,6 +24,7 @@
       <!-- License explanation -->
       <VPopover
         v-if="filterType === 'licenses'"
+        strategy="fixed"
         :label="$t('browse-page.aria.license-explanation').toString()"
       >
         <template #trigger="{ a11yProps }">

src/components/VPopover/VPopover.vue

@@ -23,6 +23,7 @@
       :visible="visibleRef"
       :trigger-element="triggerRef"
       :placement="placement"
+      :strategy="strategy"
       :hide-on-esc="hideOnEsc"
       :hide-on-click-outside="hideOnClickOutside"
       :auto-focus-on-show="autoFocusOnShow"
@@ -99,6 +100,19 @@ export default defineComponent({
         String
       ),
     },
+    /**
+     * The positioning strategy of the popover. If your reference element is in a fixed container
+     * use the fixed strategy; otherwise use the default, absolute strategy.
+     *
+     * @see https://popper.js.org/docs/v2/constructors/#strategy
+     *
+     * @default 'absolute'
+     */
+    strategy: {
+      type: /** @type {import('@nuxtjs/composition-api').PropType<import('@popperjs/core').PositioningStrategy>} */ (
+        String
+      ),
+    },
     /**
      * The label of the popover content. Must be provided if `labelledBy` is empty.
      *

src/components/VPopover/VPopoverContent.types.js

@@ -39,6 +39,15 @@ export const propTypes = {
     default: 'bottom-end',
     validate: (v) => popoverPlacements.includes(v),
   },
+  strategy: {
+    type: /** @type {import('@nuxtjs/composition-api').PropType<import('@popperjs/core').PositioningStrategy>} */ (
+      String
+    ),
+    default: 'absolute',
+    // todo: Use the actual PositioningStrategy type instead of manually writing these values,
+    // when this file is updated to TypeScript.
+    validate: (v) => ['absolute', 'fixed'].includes(v),
+  },
   zIndex: {
     type: Number,
   },

src/composables/use-popper.js

@@ -18,6 +18,7 @@ export function usePopper({ popoverRef, popoverPropsRefs }) {
     [
       popoverPropsRefs.visible,
       popoverPropsRefs.placement,
+      popoverPropsRefs.strategy,
       popoverPropsRefs.triggerElement,
       popoverRef,
     ],
@@ -26,12 +27,16 @@ export function usePopper({ popoverRef, popoverPropsRefs }) {
      * @param {unknown} _
      * @param {(cb: () => void) => void} onInvalidate
      */
-    ([visible, placement, triggerElement, popover], _, onInvalidate) => {
+    (
+      [visible, placement, strategy, triggerElement, popover],
+      _,
+      onInvalidate
+    ) => {
       if (!(triggerElement && popover)) return
 
       popperInstanceRef.value = createPopper(triggerElement, popover, {
         placement,
-        strategy: 'absolute',
+        strategy,
         modifiers: [
           {
             name: 'eventListeners',