[EuiFlyout] Two push flyouts sharing a padding target leave stale padding after closing
- Dominant language
- TypeScript
- Stars
- 6.4k
- Forks
- 911
- Avg merge
- 2d 11h
- Merged PRs (30d)
- 65
Description
## 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
https://github.com/user-attachments/assets/c9efb6b9-6461-41ae-908e-7659edee1427
---
Related issue on kibana: https://github.com/elastic/kibana/issues/276159
Contributor guide
Research direction
Start with the EuiFlyout push-padding handling and reproduce the two-flyout sequence from the linked CodeSandbox, using document.body or a shared container target. Verify the target's padding-inline-end or padding-inline-start after closing A and B; done means it returns to its base value and the full-width content is no longer shrunk.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Quiet
- Clarity
- Clearly specified
- Newbie friendliness
- 68/100