elastic / elastic/eui

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

Open
#9,788 1 comment 0 reactions 0 assignees View on GitHub
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.