fix: fixed popover overflowing edge of browser (#26464)

PostHog · Nov 27, 2024 · 48107f6 · 48107f6
1 parent 4fc35bd
commit 48107f6
Showing 1 changed file with 2 additions and 2 deletions.
diff --git 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`