feat: improve popover base component

Using fixed positioning strategy to maintain focus order.

packages/components/src/components/post-popover/post-popover.scss

@@ -4,6 +4,7 @@
 @use '@swisspost/design-system-styles/variables/commons';
 @use '@swisspost/design-system-styles/variables/spacing';
 @use '@swisspost/design-system-styles/mixins/color' as color-mx;
+@use '@swisspost/design-system-styles/mixins/elevation' as elevation-mx;
 @use '@swisspost/design-system-styles/functions/color' as color-fn;
 
 // Puts polyfilled styles in a separate layer so they are easy to override
@@ -14,7 +15,9 @@
 }
 
 div {
-  position: absolute;
+  @include elevation-mx.elevation('elevation-3');
+
+  position: fixed;
   z-index: commons.$zindex-popover;
 
   width: max-content;
@@ -32,11 +35,12 @@ div {
 }
 
 .arrow {
+  $arrow-size: math.div(spacing.$spacer, math.sqrt(2));
   position: absolute;
   // Diagonale of 16px -> 1rem -> 1/1.41 = ~0.7
   // https://www.omnicalculator.com/math/square-diagonal?c=CHF&v=hide:0,diagonal:16!cm
-  width: math.div(spacing.$spacer, math.sqrt(2));
-  aspect-ratio: 1/1;
+  width: $arrow-size;
+  height: $arrow-size;
   background-color: inherit;
   rotate: 45deg;
   pointer-events: none;

packages/components/src/components/post-popover/post-popover.tsx

@@ -9,6 +9,7 @@ import {
   Placement,
   shift,
   limitShift,
+  size,
 } from '@floating-ui/dom';
 
 // Polyfill for popovers, can be removed when https://caniuse.com/?search=popover is green
@@ -124,21 +125,23 @@ export class PostPopover {
     this.clearAutoUpdate = autoUpdate(
       this.eventTarget,
       this.popoverRef,
-      this.positionTooltip.bind(this),
+      this.calculatePosition.bind(this),
     );
   }
 
-  private async positionTooltip() {
+  private async calculatePosition() {
     const {
       x,
       y,
       middlewareData,
-
       placement: currentPlacement,
     } = await computePosition(this.eventTarget, this.popoverRef, {
       placement: this.placement || 'top',
+      strategy: 'fixed',
       middleware: [
-        flip(),
+        flip({
+          fallbackAxisSideDirection: 'start',
+        }),
         inline(),
         shift({
           padding: 8,
@@ -149,6 +152,15 @@ export class PostPopover {
             offset: 32,
           }),
         }),
+        size({
+          padding: 8,
+          apply({ availableWidth, elements }) {
+            // Do things with the data, e.g.
+            Object.assign(elements.floating.style, {
+              maxWidth: `${Math.min(availableWidth - 16, 320)}px`,
+            });
+          },
+        }),
         offset(12), // 4px outside of element to account for focus outline + ~arrow size
         arrow({ element: this.arrowRef, padding: 8 }),
       ],