elastic / elastic/eui

[Flyout System] Resizable Flyout Issues

Open
#9,683 5 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
6.4k
Forks
911
Avg merge
2d 11h
Merged PRs (30d)
65

Description

**Reported by** @kelvtanv @PhilippeOberti

**Describe the bug**

Resizable flyouts come with side effects where the parent/child presentation of flyouts goes to "stacked" mode unexpectedly when the flyout's container size changes.

**Impact and severity**

Workarounds are not user friendly. The stacked mode only shows the child flyout and doesn't show the user that there is a main (aka parent) flyout below that. The user would have to close their child flyout in order to see the main flyout, or just work on a larger viewport.

**Environment and versions**

**Minimum reproducible sandbox**

1. Use a desktop browser with a viewport width of 1920 pixels
2. Render a resizable "main" flyout, use either `m` or `s` size
3. Render child flyout, any size, doesn't have to be resizable

**To Reproduce**

1. Resize the main flyout to a large size
2. Open the child flyout
3. Issue: the flyout system uses "stacked" mode, which is designed for smaller screens

Image

**Expected behavior**

Expectation: flyouts that have been manually resized should be "unresized" when:
1. a new child flyout appears
2. the viewport / container size changes

"Unresized" means the flyout size should be reverted to the `s` or `m` size in the code.

**Screenshots (Optional)**

See video above

**Additional context (Optional)**

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.