From 1fcc99bf427144b7f0a02c1c9ea605e2fc9a3c3a Mon Sep 17 00:00:00 2001
From: Giamir Buoncristiani <giamir.buoncristiani@gmail.com>
Date: Mon, 25 May 2026 13:53:41 +0200
Subject: [PATCH 1/2] fix(stacks-svelte): shift popovers horizontally

---
 .../components/Popover/Popover.stories.svelte | 15 ++++++
 .../src/components/Popover/Popover.svelte     |  9 +++-
 .../src/components/Popover/Popover.test.ts    | 46 +++++++++++++++++++
 3 files changed, 68 insertions(+), 2 deletions(-)

diff --git a/packages/stacks-svelte/src/components/Popover/Popover.stories.svelte b/packages/stacks-svelte/src/components/Popover/Popover.stories.svelte
index f2e012033a..f8873283cf 100644
--- a/packages/stacks-svelte/src/components/Popover/Popover.stories.svelte
+++ b/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)}
diff --git a/packages/stacks-svelte/src/components/Popover/Popover.svelte b/packages/stacks-svelte/src/components/Popover/Popover.svelte
index 69951f83ce..e07d6e94a8 100644
--- a/packages/stacks-svelte/src/components/Popover/Popover.svelte
+++ b/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;
         },
diff --git a/packages/stacks-svelte/src/components/Popover/Popover.test.ts b/packages/stacks-svelte/src/components/Popover/Popover.test.ts
index 9f54642965..fbd1559a1a 100644
--- a/packages/stacks-svelte/src/components/Popover/Popover.test.ts
+++ b/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: {

From 92a30bd28b46679dce12b4dc9ee2dd23b1df9db0 Mon Sep 17 00:00:00 2001
From: Giamir Buoncristiani <giamir.buoncristiani@gmail.com>
Date: Mon, 25 May 2026 13:55:49 +0200
Subject: [PATCH 2/2] chore: add popover shift changeset

---
 .changeset/popover-horizontal-shift.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/popover-horizontal-shift.md

diff --git a/.changeset/popover-horizontal-shift.md b/.changeset/popover-horizontal-shift.md
new file mode 100644
index 0000000000..2726371dda
--- /dev/null
+++ b/.changeset/popover-horizontal-shift.md
@@ -0,0 +1,5 @@
+---
+"@stackoverflow/stacks-svelte": patch
+---
+
+Shift Popover content horizontally when it would overflow the viewport.