fix(stacks-svelte): shift popovers horizontally (#2288)

Author: giamir

.changeset/popover-horizontal-shift.md

@@ -0,0 +1,5 @@
+---
+"@stackoverflow/stacks-svelte": patch
+---
+
+Shift Popover content horizontally when it would overflow the viewport.

packages/stacks-svelte/src/components/Popover/Popover.stories.svelte

@@ -122,6 +122,21 @@
     </div>
 </Story>
 
+<Story name="Horizontal Shift" asChild>
+    <div class="hmn3 d-flex jc-end ai-center pr8">
+        <Popover id="horizontal-shift" placement="bottom" autoshow>
+            <PopoverReference>
+                <Button>Trigger</Button>
+            </PopoverReference>
+            <PopoverContent class="w-auto wmn0">
+                <span style="display: block; width: 220px;">
+                    Shifted content
+                </span>
+            </PopoverContent>
+        </Popover>
+    </div>
+</Story>
+
 <Story name="Strategies" asChild>
     <div class="d-grid grid__2 w100 ji-center py128">
         {#each PopoverStrategies as strategy (strategy)}

packages/stacks-svelte/src/components/Popover/Popover.svelte

@@ -39,7 +39,7 @@
 <script lang="ts">
     import type { Strategy } from "@floating-ui/core";
     import { setContext } from "svelte";
-    import { offset, inline, flip } from "@floating-ui/dom";
+    import { offset, inline, flip, shift } from "@floating-ui/dom";
     import { createFloatingActions } from "svelte-floating-ui";
 
     interface Props {
@@ -137,7 +137,12 @@
     const [floatingRef, floatingContent, update] = createFloatingActions({
         placement,
         strategy,
-        middleware: [offset(10), flip(), inline()],
+        middleware: [
+            offset(10),
+            flip(),
+            shift({ crossAxis: true, padding: 8 }),
+            inline(),
+        ],
         onComputed({ placement: computedPlacement }) {
             pstate.computedPlacement = computedPlacement;
         },

packages/stacks-svelte/src/components/Popover/Popover.test.ts

@@ -590,6 +590,52 @@ describe("Popover", () => {
         );
     });
 
+    it("should shift the popover content horizontally when it would overflow the viewport", async () => {
+        await setViewport({ width: 260, height: 260 });
+
+        const waitForFloatingPosition = () =>
+            new Promise<void>((resolve) => {
+                requestAnimationFrame(() => {
+                    requestAnimationFrame(() => resolve());
+                });
+            });
+
+        render(Popover, {
+            props: {
+                ...defaultProps,
+                placement: "bottom",
+                children: createSvelteComponentsSnippet([
+                    {
+                        component: PopoverReference,
+                        props: {
+                            children: createRawSnippet(() => ({
+                                render: () =>
+                                    '<button style="position: fixed; top: 80px; left: 220px;">Trigger</button>',
+                            })),
+                        },
+                    },
+                    {
+                        component: PopoverContent,
+                        props: {
+                            class: "w-auto wmn0",
+                            children: createRawSnippet(() => ({
+                                render: () =>
+                                    '<span style="box-sizing: border-box; display: block; width: 160px;">Popover Content</span>',
+                            })),
+                        },
+                    },
+                ]),
+            },
+        });
+
+        await userEvent.click(screen.getByRole("button"));
+        await waitForFloatingPosition();
+
+        const rect = screen.getByRole("dialog").getBoundingClientRect();
+
+        expect(Math.ceil(rect.right)).to.be.at.most(window.innerWidth);
+    });
+
     it("should not throw any error if the component is unmounted while the popover is open", async () => {
         const { unmount } = render(Popover, {
             props: {