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

* 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 <[email protected]>
Co-authored-by: mirka <[email protected]>
Co-authored-by: ciampo <[email protected]>
Co-authored-by: t-hamano <[email protected]>
Co-authored-by: stokesman <[email protected]>
Co-authored-by: okmttdhr <[email protected]>

Author: 7 people

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)
 

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',
 					} );
 				},