[EuiFlyout] Two push flyouts sharing a padding target leave stale padding after closing

[lucaslopezf]

Description

Describe the bug

When two type="push" flyouts share the same padding target (the container prop, or document.body by default), closing both leaves stale inline padding on the target even though no flyout is open. The surrounding page content stays shrunk.

The padding target ends up with a leftover padding-inline-end (or padding-inline-start for side="left"), so any full-width content remains squished with an empty gap where a flyout used to be.

Reproduction

CodeSandbox: https://7dy6g2.csb.app

Two independent push flyouts (pushMinBreakpoint="xs") rendered on the same target (document.body), plus a full-width bar so the shrink is visible.

Steps:

1. Toggle pushed flyout A.
2. Toggle pushed flyout B (opens while A is still open).
3. Close A (via the page button — B covers A's own close button).
4. Close B.

After step 4 there is no flyout open, but the page content stays shrunk and the full-width bar keeps a ~384px gap on the right.

Expected behavior

After both flyouts close, the target's padding-inline-end returns to its base value ("") and the content goes back to full width.

Actual behavior

The target keeps flyout A's applied padding.

Video

Screen.Recording.2026-07-07.at.07.28.41.mov

---

Related issue on kibana: elastic/kibana#276159

[tsullivan]

Seems the bug only triggers if you use the external toggle button. Using the close button of the flyout doesn't trigger the bug.

ADIL-YHGBU.A-ERYOHU.E.mov