diff --git a/frontend/package.json b/frontend/package.json
index 0fa3387e0d8..a3c09cf8688 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -56,6 +56,7 @@
     "create:component": "./bin/create-component.sh"
   },
   "dependencies": {
+    "@floating-ui/dom": "^1.5.3",
     "@nuxt/components": "^2.2.1",
     "@nuxt/vue-app": "^2.17.2",
     "@nuxtjs/composition-api": "^0.33.1",
@@ -66,7 +67,6 @@
     "@nuxtjs/sitemap": "^2.4.0",
     "@nuxtjs/svg-sprite": "0.5.2",
     "@pinia/nuxt": "0.2.1",
-    "@popperjs/core": "^2.11.8",
     "@vueuse/core": "^10.2.1",
     "@wordpress/is-shallow-equal": "^4.6.0",
     "async-mutex": "^0.3.2",
diff --git a/frontend/src/components/VContentReport/VContentReportPopover.vue b/frontend/src/components/VContentReport/VContentReportPopover.vue
index c49e4a7c48a..1c074028d9d 100644
--- a/frontend/src/components/VContentReport/VContentReportPopover.vue
+++ b/frontend/src/components/VContentReport/VContentReportPopover.vue
@@ -4,7 +4,6 @@
     :hide-on-click-outside="false"
     :label="$t('mediaDetails.contentReport.long').toString()"
     placement="bottom-end"
-    width="w-80"
   >
     <template #trigger="{ a11yProps }">
       <VContentReportButton v-bind="a11yProps" />
diff --git a/frontend/src/components/VContentSwitcher/VSearchTypePopover.vue b/frontend/src/components/VContentSwitcher/VSearchTypePopover.vue
index 691f077b3f7..a0e98b83ae9 100644
--- a/frontend/src/components/VContentSwitcher/VSearchTypePopover.vue
+++ b/frontend/src/components/VContentSwitcher/VSearchTypePopover.vue
@@ -3,7 +3,6 @@
     ref="contentMenuPopover"
     :label="$t('searchType.label').toString()"
     placement="bottom-end"
-    width="w-66"
     :clippable="true"
     :trap-focus="false"
   >
diff --git a/frontend/src/components/VContentSwitcher/VSearchTypes.vue b/frontend/src/components/VContentSwitcher/VSearchTypes.vue
index 7ff8ef15a61..2e30d8b338f 100644
--- a/frontend/src/components/VContentSwitcher/VSearchTypes.vue
+++ b/frontend/src/components/VContentSwitcher/VSearchTypes.vue
@@ -4,7 +4,6 @@
     :size="size"
     :bordered="bordered"
     type="radiogroup"
-    :class="{ 'w-66': size === 'small' }"
   >
     <div
       v-for="(category, index) in contentTypeGroups"
diff --git a/frontend/src/components/VHomepageContent.vue b/frontend/src/components/VHomepageContent.vue
index 4e470f0c2b8..3fe007fd11a 100644
--- a/frontend/src/components/VHomepageContent.vue
+++ b/frontend/src/components/VHomepageContent.vue
@@ -33,7 +33,6 @@
           :trap-focus="false"
           :visible="isContentSwitcherVisible"
           :trigger-element="triggerElement"
-          width="w-66"
           aria-labelledby="search-type-button"
         >
           <VSearchTypes
diff --git a/frontend/src/components/VPopover/VPopover.vue b/frontend/src/components/VPopover/VPopover.vue
index b6aa3524bb0..73c06be0f08 100644
--- a/frontend/src/components/VPopover/VPopover.vue
+++ b/frontend/src/components/VPopover/VPopover.vue
@@ -6,6 +6,10 @@
       ref="triggerContainerRef"
       class="flex w-min items-stretch whitespace-nowrap"
       @click="onTriggerClick"
+      @mouseenter="onTriggerMouseEnter"
+      @focusin="onTriggerMouseEnter"
+      @mouseleave="onTriggerMouseLeave"
+      @focusout="onTriggerMouseLeave"
     >
       <!--
         @slot The trigger, should be a button 99.99% of the time. If you need custom event handling on the trigger button, ensure bubbling is not prevented or else the popover will not open
@@ -21,7 +25,6 @@
     <VPopoverContent
       v-if="triggerRef"
       :z-index="zIndex"
-      :width="width"
       :visible="visibleRef"
       :trigger-element="triggerRef"
       :placement="placement"
@@ -54,7 +57,7 @@ import { useDialogControl } from "~/composables/use-dialog-control"
 
 import VPopoverContent from "~/components/VPopover/VPopoverContent.vue"
 
-import type { Placement, PositioningStrategy } from "@popperjs/core"
+import type { Placement, Strategy } from "@floating-ui/dom"
 
 export default defineComponent({
   name: "VPopover",
@@ -64,6 +67,10 @@ export default defineComponent({
    * default for each of them can take over.
    */
   props: {
+    /**
+     * Whether the popover should show when the trigger is hovered on.
+     */
+    activateOnHover: { type: Boolean, default: undefined },
     /**
      * Whether the popover should hide when the <kbd>Escape</kbd> key is pressed.
      *
@@ -93,9 +100,9 @@ export default defineComponent({
     autoFocusOnHide: { type: Boolean, default: undefined },
     /**
      * The placement of the popover relative to the trigger. Should be one of the options
-     * for `placement` passed to popper.js.
+     * for `placement` passed to floating-ui.
      *
-     * @see https://popper.js.org/docs/v2/constructors/#options
+     * @see https://floating-ui.com/docs/tutorial#placements
      *
      * @default 'bottom'
      */
@@ -106,12 +113,12 @@ export default defineComponent({
      * 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
+     * @see https://floating-ui.com/docs/computeposition#strategy
      *
      * @default 'absolute'
      */
     strategy: {
-      type: String as PropType<PositioningStrategy>,
+      type: String as PropType<Strategy>,
     },
     /**
      * The label of the popover content. Must be provided if `labelledBy` is empty.
@@ -147,12 +154,6 @@ export default defineComponent({
      * @default true
      */
     trapFocus: { type: Boolean, default: undefined },
-    /**
-     * Optional Tailwind class for fixed width popover content.
-     *
-     * @default undefined
-     */
-    width: { type: String },
   },
   emits: [
     /**
@@ -164,13 +165,13 @@ export default defineComponent({
      */
     "close",
   ],
-  setup(_, { emit }) {
+  setup(props, { emit }) {
     const visibleRef = ref(false)
     const triggerContainerRef = ref<HTMLElement | null>(null)
 
     const triggerRef = computed(() =>
-      triggerContainerRef.value?.firstChild
-        ? (triggerContainerRef.value.firstChild as HTMLElement)
+      triggerContainerRef.value?.firstElementChild
+        ? (triggerContainerRef.value.firstElementChild as HTMLElement)
         : undefined
     )
 
@@ -179,6 +180,17 @@ export default defineComponent({
       emit: emit as SetupContext["emit"],
     })
 
+    const onTriggerMouseEnter = () => {
+      if (props.activateOnHover) {
+        open()
+      }
+    }
+    const onTriggerMouseLeave = () => {
+      if (props.activateOnHover) {
+        close()
+      }
+    }
+
     return {
       open,
       close,
@@ -186,6 +198,8 @@ export default defineComponent({
       triggerContainerRef,
       triggerRef,
       onTriggerClick,
+      onTriggerMouseEnter,
+      onTriggerMouseLeave,
       triggerA11yProps,
     }
   },
diff --git a/frontend/src/components/VPopover/VPopoverContent.vue b/frontend/src/components/VPopover/VPopoverContent.vue
index 62a34ccd675..29667835710 100644
--- a/frontend/src/components/VPopover/VPopoverContent.vue
+++ b/frontend/src/components/VPopover/VPopoverContent.vue
@@ -1,24 +1,18 @@
 <template>
   <div
     v-show="visible"
-    class="h-0 w-0"
+    ref="popoverRef"
+    role="dialog"
+    aria-modal="true"
+    class="popover-content w-max-content absolute left-0 top-0 overflow-y-auto overflow-x-hidden rounded-sm border border-light-gray bg-white shadow"
+    :class="`z-${zIndex}`"
+    :style="{ ...heightProperties, ...style }"
+    :tabindex="-1"
     :aria-hidden="!visible"
-    v-on="$listeners"
+    @blur="onBlur"
     @keydown="onKeyDown"
   >
-    <div
-      ref="popoverRef"
-      role="dialog"
-      aria-modal="true"
-      class="popover-content overflow-y-auto overflow-x-hidden rounded-sm border border-light-gray bg-white shadow"
-      :class="[`z-${zIndex}`, width]"
-      :style="heightProperties"
-      :tabindex="-1"
-      v-bind="$attrs"
-      @blur="onBlur"
-    >
-      <slot />
-    </div>
+    <slot />
   </div>
 </template>
 
@@ -37,7 +31,7 @@ import { defineEvent } from "~/types/emits"
 
 import { zIndexValidator } from "~/constants/z-indices"
 
-import type { Placement, PositioningStrategy } from "@popperjs/core"
+import type { Placement, Strategy } from "@floating-ui/dom"
 
 import type { SetupContext } from "vue"
 
@@ -47,7 +41,6 @@ export const VPopoverContentContextKey = Symbol(
 
 export default defineComponent({
   name: "VPopoverContent",
-  inheritAttrs: false,
   props: {
     visible: {
       type: Boolean,
@@ -84,7 +77,7 @@ export default defineComponent({
       default: "bottom-end",
     },
     strategy: {
-      type: String as PropType<PositioningStrategy>,
+      type: String as PropType<Strategy>,
       default: "absolute",
     },
     zIndex: {
@@ -100,12 +93,6 @@ export default defineComponent({
       type: Boolean,
       default: true,
     },
-    /**
-     * Optional Tailwind class for fixed width.
-     */
-    width: {
-      type: String,
-    },
   },
   /**
    * This is the only documented emitted event but in reality we pass through `$listeners`
@@ -119,21 +106,19 @@ export default defineComponent({
     const propsRefs = toRefs(props)
     const popoverRef = ref<HTMLElement | null>(null)
 
-    const { onKeyDown, onBlur, heightProperties } = usePopoverContent({
+    const { onKeyDown, onBlur, heightProperties, style } = usePopoverContent({
       popoverRef,
       popoverPropsRefs: propsRefs,
       emit: emit as SetupContext["emit"],
       attrs,
     })
 
-    return { popoverRef, onKeyDown, onBlur, heightProperties }
+    return { popoverRef, onKeyDown, onBlur, heightProperties, style }
   },
 })
 </script>
 <style>
 .popover-content {
   height: var(--popover-height, auto);
-  scrollbar-gutter: stable;
-  overflow-x: hidden;
 }
 </style>
diff --git a/frontend/src/components/VPopover/meta/VPopover.stories.mdx b/frontend/src/components/VPopover/meta/VPopover.stories.mdx
index e86706594ed..f700633e8da 100644
--- a/frontend/src/components/VPopover/meta/VPopover.stories.mdx
+++ b/frontend/src/components/VPopover/meta/VPopover.stories.mdx
@@ -6,11 +6,24 @@ import {
   Story,
 } from "@storybook/addon-docs"
 
-import { placements as popoverPlacements } from "@popperjs/core"
-
 import VPopover from "~/components/VPopover/VPopover.vue"
 import VButton from "~/components/VButton.vue"
 
+export const popoverPlacements = [
+  "top",
+  "top-start",
+  "top-end",
+  "bottom",
+  "bottom-start",
+  "bottom-end",
+  "left",
+  "left-start",
+  "left-end",
+  "right",
+  "right-start",
+  "right-end",
+]
+
 <Meta
   title="Components/VPopover"
   components={VPopover}
diff --git a/frontend/src/composables/use-floating-ui.ts b/frontend/src/composables/use-floating-ui.ts
new file mode 100644
index 00000000000..f04b25bdc65
--- /dev/null
+++ b/frontend/src/composables/use-floating-ui.ts
@@ -0,0 +1,115 @@
+import { ref, watch, Ref, ToRefs } from "vue"
+import {
+  autoUpdate,
+  computePosition,
+  detectOverflow,
+  flip,
+  limitShift,
+  MiddlewareState,
+  offset,
+  Placement,
+  shift,
+  Strategy,
+} from "@floating-ui/dom"
+
+export type PopoverContentProps = {
+  visible: boolean
+  hide: () => void
+  hideOnEsc: boolean
+  hideOnClickOutside: boolean
+  autoFocusOnShow: boolean
+  autoFocusOnHide: boolean
+  triggerElement: HTMLElement | null
+  placement: Placement
+  strategy: Strategy
+  clippable: boolean
+  trapFocus: boolean
+  zIndex: number | string
+}
+
+type Props = {
+  floatingElRef: Ref<HTMLElement | null>
+  floatingPropsRefs: ToRefs<PopoverContentProps>
+}
+
+// A constant offset to ensure there's a gap between
+// the floating element and the window border.
+const FloatingOffset = 20
+
+export function useFloatingUi({ floatingElRef, floatingPropsRefs }: Props) {
+  const maxHeightRef = ref<number | null>(null)
+  const style = ref<Record<string, string> | null>(null)
+  const cleanup = ref<null | (() => void)>(null)
+
+  const buildAutoUpdate = (
+    triggerElement: HTMLElement,
+    floatingElement: HTMLElement
+  ) => {
+    return autoUpdate(triggerElement, floatingElement, () => {
+      computePosition(triggerElement, floatingElement, {
+        placement: floatingPropsRefs.placement.value,
+        middleware: [
+          offset(8),
+          flip(),
+          shift({ limiter: limitShift() }),
+          detectMaxHeight,
+        ],
+      }).then(({ x, y }) => {
+        style.value = {
+          left: `${x}px`, // floating-ui is handling RTL, so `left` is set correctly here.
+          top: `${y}px`,
+        }
+      })
+    })
+  }
+
+  watch(
+    [
+      floatingElRef,
+      floatingPropsRefs.triggerElement,
+      floatingPropsRefs.visible,
+    ] as const,
+    ([floatingElement, triggerElement, visible], _, onInvalidate) => {
+      if (!triggerElement || !floatingElement) {
+        cleanup.value?.()
+        return
+      }
+      if (!visible) return
+
+      cleanup.value = buildAutoUpdate(triggerElement, floatingElement)
+
+      onInvalidate(() => {
+        cleanup.value?.()
+      })
+    }
+  )
+
+  /**
+   * Detects if the popover is overflowing the viewport,
+   * and sets the max-height of the popover accordingly.
+   * If there is no overflow, the max-height is set to null.
+   **/
+  const detectMaxHeight = {
+    name: "detectMaxHeight",
+    async fn(state: MiddlewareState) {
+      if (!floatingPropsRefs.clippable.value) return {}
+      const overflow = await detectOverflow(state, { padding: FloatingOffset })
+      const verticalOverflow = Math.max(overflow.top, overflow.bottom)
+
+      if (verticalOverflow > 0) {
+        maxHeightRef.value = state.rects.floating.height - verticalOverflow
+      } else if (maxHeightRef.value) {
+        const p = floatingElRef.value as HTMLElement
+        const isScrollable = p.scrollHeight > p.clientHeight
+        if (!isScrollable) {
+          maxHeightRef.value = null
+        } else if (maxHeightRef.value > p.clientHeight) {
+          maxHeightRef.value += Math.max(overflow.top, overflow.bottom)
+        }
+      }
+      return {}
+    },
+  }
+
+  return { style, maxHeightRef }
+}
diff --git a/frontend/src/composables/use-popover-content.ts b/frontend/src/composables/use-popover-content.ts
index 875af98ee0b..f3d09d23788 100644
--- a/frontend/src/composables/use-popover-content.ts
+++ b/frontend/src/composables/use-popover-content.ts
@@ -1,6 +1,9 @@
 import { computed, ref } from "vue"
 
-import { PopoverContentProps, usePopper } from "~/composables/use-popper"
+import {
+  PopoverContentProps,
+  useFloatingUi,
+} from "~/composables/use-floating-ui"
 
 import { useDialogContent } from "~/composables/use-dialog-content"
 
@@ -40,9 +43,9 @@ export function usePopoverContent({
     attrs,
   })
 
-  const { maxHeightRef } = usePopper({
-    popoverRef,
-    popoverPropsRefs,
+  const { style, maxHeightRef } = useFloatingUi({
+    floatingElRef: popoverRef,
+    floatingPropsRefs: popoverPropsRefs,
   })
 
   const heightProperties = computed(() => {
@@ -54,5 +57,5 @@ export function usePopoverContent({
       : ({} as CSSProperties)
   })
 
-  return { onKeyDown, onBlur, heightProperties }
+  return { onKeyDown, onBlur, style, heightProperties }
 }
diff --git a/frontend/src/composables/use-popper.ts b/frontend/src/composables/use-popper.ts
deleted file mode 100644
index 53cc1cf53b6..00000000000
--- a/frontend/src/composables/use-popper.ts
+++ /dev/null
@@ -1,112 +0,0 @@
-import { ref, watch, Ref, ToRefs } from "vue"
-import {
-  createPopper,
-  detectOverflow,
-  Instance,
-  Placement,
-  PositioningStrategy,
-} from "@popperjs/core"
-import { useWindowSize } from "@vueuse/core"
-
-export type PopoverContentProps = {
-  visible: boolean
-  hide: () => void
-  hideOnEsc: boolean
-  hideOnClickOutside: boolean
-  autoFocusOnShow: boolean
-  autoFocusOnHide: boolean
-  triggerElement: HTMLElement | null
-  placement: Placement
-  strategy: PositioningStrategy
-  clippable: boolean
-  trapFocus: boolean
-  zIndex: number | string
-}
-
-type Props = {
-  popoverRef: Ref<HTMLElement | null>
-  popoverPropsRefs: ToRefs<PopoverContentProps>
-}
-
-// A constant offset to ensure there's a gap between
-// the popover and the window border.
-const PopperOffset = 20
-
-export function usePopper({ popoverRef, popoverPropsRefs }: Props) {
-  const popperInstanceRef = ref<Instance | undefined>()
-  const maxHeightRef = ref<number | null>(null)
-
-  watch(
-    [
-      popoverPropsRefs.triggerElement,
-      popoverPropsRefs.placement,
-      popoverPropsRefs.strategy,
-      popoverPropsRefs.visible,
-      popoverRef,
-    ] as const,
-    (
-      [triggerElement, placement, strategy, visible, popover],
-      _,
-      onInvalidate
-    ) => {
-      if (!(triggerElement && popover)) return
-
-      popperInstanceRef.value = createPopper(triggerElement, popover, {
-        placement,
-        strategy,
-        modifiers: [
-          {
-            name: "eventListeners",
-            enabled: visible,
-          },
-          {
-            name: "arrow",
-            enabled: false,
-          },
-          {
-            name: "offset",
-            options: {
-              offset: [0, 8],
-            },
-          },
-        ],
-      })
-
-      onInvalidate(() => {
-        if (popperInstanceRef.value) {
-          popperInstanceRef.value.destroy()
-          popperInstanceRef.value = undefined
-        }
-      })
-    },
-    { immediate: true }
-  )
-
-  /**
-   * Detects if the popover is overflowing the viewport,
-   * and sets the max-height of the popover accordingly.
-   * If there is no overflow, the max-height is set to null.
-   **/
-  const detectMaxHeight = (popper: Instance) => {
-    popper.forceUpdate() // make sure that `rects` are set
-
-    const overflow = detectOverflow(popper.state)
-    const verticalOverflow = Math.max(
-      -PopperOffset,
-      Math.max(overflow.bottom, overflow.top)
-    )
-
-    return verticalOverflow + PopperOffset > 0
-      ? popper.state.rects.popper.height - verticalOverflow - PopperOffset
-      : null
-  }
-  const { height: windowHeight } = useWindowSize()
-  // We only use `windowHeight` to call update the popper max height when it changes, we don't need the actual value
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  watch([popperInstanceRef, windowHeight] as const, ([popper, _]) => {
-    if (!popper) return
-    maxHeightRef.value = detectMaxHeight(popper)
-  })
-
-  return { maxHeightRef }
-}
diff --git a/frontend/test/playwright/visual-regression/components/content-report-form.spec.ts-snapshots/content-report-focused-md-linux.png b/frontend/test/playwright/visual-regression/components/content-report-form.spec.ts-snapshots/content-report-focused-md-linux.png
index 8fcefe34009..8297b02a1be 100644
Binary files a/frontend/test/playwright/visual-regression/components/content-report-form.spec.ts-snapshots/content-report-focused-md-linux.png and b/frontend/test/playwright/visual-regression/components/content-report-form.spec.ts-snapshots/content-report-focused-md-linux.png differ
diff --git a/frontend/test/playwright/visual-regression/components/content-report-form.spec.ts-snapshots/content-report-unfocused-md-linux.png b/frontend/test/playwright/visual-regression/components/content-report-form.spec.ts-snapshots/content-report-unfocused-md-linux.png
index 8fcefe34009..8297b02a1be 100644
Binary files a/frontend/test/playwright/visual-regression/components/content-report-form.spec.ts-snapshots/content-report-unfocused-md-linux.png and b/frontend/test/playwright/visual-regression/components/content-report-form.spec.ts-snapshots/content-report-unfocused-md-linux.png differ
diff --git a/frontend/test/playwright/visual-regression/pages/homepage.spec.ts-snapshots/content-switcher-open-ltr-2xl-linux.png b/frontend/test/playwright/visual-regression/pages/homepage.spec.ts-snapshots/content-switcher-open-ltr-2xl-linux.png
index 6388c8b1c31..11205a1d89a 100644
Binary files a/frontend/test/playwright/visual-regression/pages/homepage.spec.ts-snapshots/content-switcher-open-ltr-2xl-linux.png and b/frontend/test/playwright/visual-regression/pages/homepage.spec.ts-snapshots/content-switcher-open-ltr-2xl-linux.png differ
diff --git a/frontend/test/playwright/visual-regression/pages/homepage.spec.ts-snapshots/content-switcher-open-ltr-lg-linux.png b/frontend/test/playwright/visual-regression/pages/homepage.spec.ts-snapshots/content-switcher-open-ltr-lg-linux.png
index f475b19edfe..6bdcd382cad 100644
Binary files a/frontend/test/playwright/visual-regression/pages/homepage.spec.ts-snapshots/content-switcher-open-ltr-lg-linux.png and b/frontend/test/playwright/visual-regression/pages/homepage.spec.ts-snapshots/content-switcher-open-ltr-lg-linux.png differ
diff --git a/frontend/test/playwright/visual-regression/pages/homepage.spec.ts-snapshots/content-switcher-open-ltr-xl-linux.png b/frontend/test/playwright/visual-regression/pages/homepage.spec.ts-snapshots/content-switcher-open-ltr-xl-linux.png
index 15769f609dd..d87bf1aac46 100644
Binary files a/frontend/test/playwright/visual-regression/pages/homepage.spec.ts-snapshots/content-switcher-open-ltr-xl-linux.png and b/frontend/test/playwright/visual-regression/pages/homepage.spec.ts-snapshots/content-switcher-open-ltr-xl-linux.png differ
diff --git a/frontend/test/playwright/visual-regression/pages/homepage.spec.ts-snapshots/content-switcher-open-rtl-2xl-linux.png b/frontend/test/playwright/visual-regression/pages/homepage.spec.ts-snapshots/content-switcher-open-rtl-2xl-linux.png
index 07342a2d149..5594663555e 100644
Binary files a/frontend/test/playwright/visual-regression/pages/homepage.spec.ts-snapshots/content-switcher-open-rtl-2xl-linux.png and b/frontend/test/playwright/visual-regression/pages/homepage.spec.ts-snapshots/content-switcher-open-rtl-2xl-linux.png differ
diff --git a/frontend/test/playwright/visual-regression/pages/homepage.spec.ts-snapshots/content-switcher-open-rtl-lg-linux.png b/frontend/test/playwright/visual-regression/pages/homepage.spec.ts-snapshots/content-switcher-open-rtl-lg-linux.png
index 07c4a812a76..3fbee378ce2 100644
Binary files a/frontend/test/playwright/visual-regression/pages/homepage.spec.ts-snapshots/content-switcher-open-rtl-lg-linux.png and b/frontend/test/playwright/visual-regression/pages/homepage.spec.ts-snapshots/content-switcher-open-rtl-lg-linux.png differ
diff --git a/frontend/test/playwright/visual-regression/pages/homepage.spec.ts-snapshots/content-switcher-open-rtl-xl-linux.png b/frontend/test/playwright/visual-regression/pages/homepage.spec.ts-snapshots/content-switcher-open-rtl-xl-linux.png
index 9fba38f5efa..0682af69eed 100644
Binary files a/frontend/test/playwright/visual-regression/pages/homepage.spec.ts-snapshots/content-switcher-open-rtl-xl-linux.png and b/frontend/test/playwright/visual-regression/pages/homepage.spec.ts-snapshots/content-switcher-open-rtl-xl-linux.png differ
diff --git a/frontend/test/playwright/visual-regression/pages/homepage.spec.ts-snapshots/content-switcher-with-external-sources-open-ltr-2xl-linux.png b/frontend/test/playwright/visual-regression/pages/homepage.spec.ts-snapshots/content-switcher-with-external-sources-open-ltr-2xl-linux.png
index 8a662e3ec34..566aa51d387 100644
Binary files a/frontend/test/playwright/visual-regression/pages/homepage.spec.ts-snapshots/content-switcher-with-external-sources-open-ltr-2xl-linux.png and b/frontend/test/playwright/visual-regression/pages/homepage.spec.ts-snapshots/content-switcher-with-external-sources-open-ltr-2xl-linux.png differ
diff --git a/frontend/test/playwright/visual-regression/pages/homepage.spec.ts-snapshots/content-switcher-with-external-sources-open-ltr-lg-linux.png b/frontend/test/playwright/visual-regression/pages/homepage.spec.ts-snapshots/content-switcher-with-external-sources-open-ltr-lg-linux.png
index 76e6d5a6fb8..0dfcb17a353 100644
Binary files a/frontend/test/playwright/visual-regression/pages/homepage.spec.ts-snapshots/content-switcher-with-external-sources-open-ltr-lg-linux.png and b/frontend/test/playwright/visual-regression/pages/homepage.spec.ts-snapshots/content-switcher-with-external-sources-open-ltr-lg-linux.png differ
diff --git a/frontend/test/playwright/visual-regression/pages/homepage.spec.ts-snapshots/content-switcher-with-external-sources-open-ltr-xl-linux.png b/frontend/test/playwright/visual-regression/pages/homepage.spec.ts-snapshots/content-switcher-with-external-sources-open-ltr-xl-linux.png
index 240d086fa97..c2cdf8a33ce 100644
Binary files a/frontend/test/playwright/visual-regression/pages/homepage.spec.ts-snapshots/content-switcher-with-external-sources-open-ltr-xl-linux.png and b/frontend/test/playwright/visual-regression/pages/homepage.spec.ts-snapshots/content-switcher-with-external-sources-open-ltr-xl-linux.png differ
diff --git a/frontend/test/playwright/visual-regression/pages/homepage.spec.ts-snapshots/content-switcher-with-external-sources-open-rtl-2xl-linux.png b/frontend/test/playwright/visual-regression/pages/homepage.spec.ts-snapshots/content-switcher-with-external-sources-open-rtl-2xl-linux.png
index 5a5e0ae701b..f6ff396a54a 100644
Binary files a/frontend/test/playwright/visual-regression/pages/homepage.spec.ts-snapshots/content-switcher-with-external-sources-open-rtl-2xl-linux.png and b/frontend/test/playwright/visual-regression/pages/homepage.spec.ts-snapshots/content-switcher-with-external-sources-open-rtl-2xl-linux.png differ
diff --git a/frontend/test/playwright/visual-regression/pages/homepage.spec.ts-snapshots/content-switcher-with-external-sources-open-rtl-lg-linux.png b/frontend/test/playwright/visual-regression/pages/homepage.spec.ts-snapshots/content-switcher-with-external-sources-open-rtl-lg-linux.png
index 39c910f71e7..8f21964dec3 100644
Binary files a/frontend/test/playwright/visual-regression/pages/homepage.spec.ts-snapshots/content-switcher-with-external-sources-open-rtl-lg-linux.png and b/frontend/test/playwright/visual-regression/pages/homepage.spec.ts-snapshots/content-switcher-with-external-sources-open-rtl-lg-linux.png differ
diff --git a/frontend/test/playwright/visual-regression/pages/homepage.spec.ts-snapshots/content-switcher-with-external-sources-open-rtl-xl-linux.png b/frontend/test/playwright/visual-regression/pages/homepage.spec.ts-snapshots/content-switcher-with-external-sources-open-rtl-xl-linux.png
index 4f1d07001e1..94c76862689 100644
Binary files a/frontend/test/playwright/visual-regression/pages/homepage.spec.ts-snapshots/content-switcher-with-external-sources-open-rtl-xl-linux.png and b/frontend/test/playwright/visual-regression/pages/homepage.spec.ts-snapshots/content-switcher-with-external-sources-open-rtl-xl-linux.png differ
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 492268d39c7..5301d3a5fc1 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -41,6 +41,7 @@ importers:
       '@babel/parser': ^7.22.5
       '@babel/preset-env': ^7.22.5
       '@babel/preset-typescript': ^7.22.5
+      '@floating-ui/dom': ^1.5.3
       '@itsjonq/remake': ^2.0.0
       '@nuxt/components': ^2.2.1
       '@nuxt/types': ^2.17.2
@@ -57,7 +58,6 @@ importers:
       '@pinia/nuxt': 0.2.1
       '@pinia/testing': ^0.1.0
       '@playwright/test': 1.30.0
-      '@popperjs/core': ^2.11.8
       '@tailwindcss/typography': ^0.5.10
       '@testing-library/dom': ^8.13.0
       '@testing-library/jest-dom': ^5.16.1
@@ -124,6 +124,7 @@ importers:
       vue-tsc: 1.8.22
       webpack: ^4.46.0
     dependencies:
+      '@floating-ui/dom': 1.5.3
       '@nuxt/components': 2.2.1
       '@nuxt/vue-app': 2.17.2
       '@nuxtjs/composition-api': 0.33.1_j25mhj5aambesoof37dkoeldru
@@ -134,7 +135,6 @@ importers:
       '@nuxtjs/sitemap': 2.4.0
       '@nuxtjs/svg-sprite': 0.5.2
       '@pinia/nuxt': 0.2.1_pinia@2.0.33+vue@2.7.15
-      '@popperjs/core': 2.11.8
       '@vueuse/core': 10.2.1_vue@2.7.15
       '@wordpress/is-shallow-equal': 4.8.0
       async-mutex: 0.3.2
@@ -3864,6 +3864,23 @@ packages:
     resolution: {integrity: sha512-ZSjtmelB7IJfWD2Fvb7+Z+ChTIKWq6kjda95fLcQKNS5aheVHn4IkfgRQE3sIIzTcSLwLcLZUD9UBt+V7+h+Pw==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
 
+  /@floating-ui/core/1.5.0:
+    resolution: {integrity: sha512-kK1h4m36DQ0UHGj5Ah4db7R0rHemTqqO0QLvUqi1/mUUp3LuAWbWxdxSIf/XsnH9VS6rRVPLJCncjRzUvyCLXg==}
+    dependencies:
+      '@floating-ui/utils': 0.1.6
+    dev: false
+
+  /@floating-ui/dom/1.5.3:
+    resolution: {integrity: sha512-ClAbQnEqJAKCJOEbbLo5IUlZHkNszqhuxS4fHAVxRPXPya6Ysf2G8KypnYcOTpx6I8xcgF9bbHb6g/2KpbV8qA==}
+    dependencies:
+      '@floating-ui/core': 1.5.0
+      '@floating-ui/utils': 0.1.6
+    dev: false
+
+  /@floating-ui/utils/0.1.6:
+    resolution: {integrity: sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A==}
+    dev: false
+
   /@gar/promisify/1.1.2:
     resolution: {integrity: sha512-82cpyJyKRoQoRi+14ibCeGPu0CwypgtBAdBhq1WfvagpCZNKqwXbKwXllYSMG91DhmG4jt9gN8eP6lGOtozuaw==}
 
@@ -5566,10 +5583,6 @@ packages:
     resolution: {integrity: sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==}
     dev: false
 
-  /@popperjs/core/2.11.8:
-    resolution: {integrity: sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==}
-    dev: false
-
   /@sentry-internal/tracing/7.77.0:
     resolution: {integrity: sha512-8HRF1rdqWwtINqGEdx8Iqs9UOP/n8E0vXUu3Nmbqj4p5sQPA7vvCfq+4Y4rTqZFc7sNdFpDsRION5iQEh8zfZw==}
     engines: {node: '>=8'}