Flyout dimmer vs modal overlay — side-by-side flyouts and migration options

[ek-so]

The problem

Right now we often use flyouts for interactions that are really modal: the user needs to make a decision and move on, and doesn’t need to see the rest of the interface. That creates unnecessary complexity.

We want to stop using flyout masks for those cases. Truly modal work should use modals (full overlay, blocks the rest of the UI). Flyouts should be for when we need content side by side with the main app workspace — not as a substitute for a modal.

---

Open questions

• How do we get there? (migration, timing, ownership)
• Do we remove the flyout mask and deprecate that option outright?
• Or do we ship a default first (no mask) and deprecate the old behavior later?
• Modal width: should we define a small set of breakpoints or preset widths so modals stay consistent but still fit different use cases — especially if modals are used more often in this model?

---

Slack

https://elastic.slack.com/archives/C049ADQE99S/p1774564475101829