Popover: Add virtual padding to prevent it from hitting the viewport edge (#69555)

yogeshbhutkar · yogeshbhutkar · mirka · web-flow · commit feb44abb63ec · 2025-04-17T18:24:12.000+09:00
* feat: introduce `overflowOffset` prop to control maximum height calculation

* fix: set default value for `overflowOffset` prop in Popover component

* chore: add changelog entry

* fix: rename `overflowOffset` prop to `overflowOffsetY` for clarity

* chore: update changelog to include `overflowOffsetY` prop for Popover component

* fix: use `padding` instead of manual offset implementation

* fix: add a static `8px` overflow padding

* chore: move CHANGELOG

* chore: update unit test snapshots

* revert: restore changes made to snapshot file

* fix: update maxHeight, maxWidth to accomodate overflowPadding

* fix: remove maxWidth calculations

* fix: use `padding` within `size` middleware

* chore: move `CHANGELOG` to `Unreleased` section

Co-authored-by: yogeshbhutkar &lt;yogeshbhutkar@git.wordpress.org&gt;
Co-authored-by: mirka &lt;0mirka00@git.wordpress.org&gt;
Co-authored-by: ciampo &lt;mciampini@git.wordpress.org&gt;
Co-authored-by: t-hamano &lt;wildworks@git.wordpress.org&gt;
Co-authored-by: stokesman &lt;presstoke@git.wordpress.org&gt;
Co-authored-by: okmttdhr &lt;okat@git.wordpress.org&gt;
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -5,6 +5,7 @@
 ### Enhancement
 
 -   `Guide`: Make next and previous button text customizable ([#69907](https://github.com/WordPress/gutenberg/pull/69907)).
+-   `Popover`: Introduce a virtual padding of `8px` to prevent it from hitting the viewport edge ([#69555](https://github.com/WordPress/gutenberg/pull/69555)).
 
 ## 29.8.0 (2025-04-11)
 
diff --git a/packages/components/src/popover/index.tsx b/packages/components/src/popover/index.tsx
@@ -71,6 +71,13 @@ import { StyleProvider } from '../style-provider';
  */
 export const SLOT_NAME = 'Popover';
 
+/**
+ * Virtual padding to account for overflow boundaries.
+ *
+ * @type {number}
+ */
+const OVERFLOW_PADDING = 8;
+
 // An SVG displaying a triangle facing down, filled with a solid
 // color and bordered in such a way to create an arrow-like effect.
 // Keeping the SVG's viewbox squared simplify the arrow positioning
@@ -224,6 +231,7 @@ const UnforwardedPopover = (
 		computedFlipProp && flipMiddleware(),
 		computedResizeProp &&
 			size( {
+				padding: OVERFLOW_PADDING,
 				apply( sizeProps ) {
 					const { firstElementChild } = refs.floating.current ?? {};
 
@@ -234,7 +242,10 @@ const UnforwardedPopover = (
 
 					// Reduce the height of the popover to the available space.
 					Object.assign( firstElementChild.style, {
-						maxHeight: `${ sizeProps.availableHeight }px`,
+						maxHeight: `${ Math.max(
+							0,
+							sizeProps.availableHeight
+						) }px`,
 						overflow: 'auto',
 					} );
 				},
