From 48107f6f4ff3cad379f57728057be8143ba48832 Mon Sep 17 00:00:00 2001
From: Adam Leith <adamleithp@users.noreply.github.com>
Date: Wed, 27 Nov 2024 18:39:32 +0000
Subject: [PATCH] fix: fixed popover overflowing edge of browser (#26464)

---
 frontend/src/lib/lemon-ui/Popover/Popover.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/lib/lemon-ui/Popover/Popover.tsx b/frontend/src/lib/lemon-ui/Popover/Popover.tsx
index f14e507a99433..67da3be6ebae7 100644
--- a/frontend/src/lib/lemon-ui/Popover/Popover.tsx
+++ b/frontend/src/lib/lemon-ui/Popover/Popover.tsx
@@ -134,12 +134,12 @@ export const Popover = React.forwardRef<HTMLDivElement, PopoverProps>(function P
         strategy: 'fixed',
         middleware: [
             ...(fallbackPlacements ? [flip({ fallbackPlacements, fallbackStrategy: 'initialPlacement' })] : []),
-            shift(),
+            shift({ padding: 8, boundary: document.body }), // Add padding and use document.body as boundary
             size({
                 padding: 4,
                 apply({ availableWidth, availableHeight, rects, elements: { floating } }) {
                     floating.style.maxHeight = `${availableHeight}px`
-                    floating.style.maxWidth = `${availableWidth}px`
+                    floating.style.maxWidth = `${Math.min(availableWidth, window.innerWidth - 16)}px` // Ensure popover doesn't extend past window edge
                     floating.style.width = 'initial'
                     if (matchWidth) {
                         floating.style.minWidth = `${rects.reference.width}px`