[EuiFlyout] Use child flyout width for padding when stacked by weronikaolejniczak · Pull Request #9322 · elastic/eui

weronikaolejniczak · 2026-01-16T09:41:29Z

Summary

Fixed an issue where push flyouts in a stacked layout calculated the content offset based on the hidden main flyout's width instead of the visible child flyout's width.

Why are we making this change?

It was reported on #9318 (comment)

Screenshots #

Before	After
Kapture.2026-01-16.at.10.47.05.mp4	Kapture.2026-01-16.at.10.23.06.mp4

Impact to users

🟢 This is a bug fix. No changes needed on consumer side.

QA

Specific checklist

[Playground] Verify that the offset width is correct by resizing child flyout
[Playground] Make sure there's no regression compared to prod
- open a single type="push" flyout and resize it
- open a main type="push" flyout and a child flyout on a wide screen, ensure they're side-by-side and resize
- start with main + child in stacked mode, expand the window until it switches to side-by-side layout
- start with main + child in stacked mode, close the child flyout
Smoke test Multi-session example
Smoke test Multi-root sync

General checklist

Browser QA
- Checked in both light and dark modes
- Checked in both MacOS and Windows high contrast modes
  - (emulate forced colors if you do not have access to a Windows machine.)
- Checked in mobile
- Checked in Chrome, Safari, Edge, and Firefox
- Checked for accessibility including keyboard-only and screenreader modes
Docs site QA
- Added documentation
- Props have proper autodocs (using @default if default values are missing) and playground toggles
- Checked Code Sandbox works for any docs examples
Code quality checklist
- Added or updated jest and cypress tests
- Updated visual regression tests
Release checklist
- A changelog entry exists and is marked appropriately
- If applicable, added the breaking change issue label (and filled out the breaking change checklist)
- If the changes unblock an issue in a different repo, smoke tested carefully (see Testing EUI features in Kibana ahead of time)
Designer checklist
- If applicable, file an issue to update EUI's Figma library with any corresponding UI changes. (This is an internal repo, if you are external to Elastic, ask a maintainer to submit this request)

elasticmachine · 2026-01-16T10:05:11Z

💚 Build Succeeded

cc @weronikaolejniczak

elasticmachine · 2026-01-16T10:20:19Z

💚 Build Succeeded

Buildkite Build
Commit: 5f62974

cc @weronikaolejniczak

weronikaolejniczak · 2026-01-16T12:17:44Z

packages/eui/src/components/flyout/flyout.component.tsx

+    // Memoize flyout identification and relationships to prevent race conditions
+    const flyoutIdentity = useMemo(() => {
+      if (!flyoutId || !currentSession) {
+        return {
+          isMainFlyout: false,
+          siblingFlyoutId: null,
+          hasValidSession: false,
+          sessionForWidth: null,
+        };
+      }
+
+      const siblingFlyoutId =
+        currentSession.mainFlyoutId === flyoutId
+          ? currentSession.childFlyoutId
+          : currentSession.mainFlyoutId;
+
+      return {
+        isMainFlyout: currentSession.mainFlyoutId === flyoutId,
+        siblingFlyoutId,
+        hasValidSession: true,
+        sessionForWidth: currentSession,
+      };
+    }, [flyoutId, currentSession]);
+
+    // Destructure for easier use
+    const { siblingFlyoutId, isMainFlyout } = flyoutIdentity;
+
+    const _siblingFlyoutWidth = useFlyoutWidth(siblingFlyoutId);


This code was not added, it was moved from below, unchanged. The only difference is underscoring siblingFlyoutWidth because we're using the same name to set 0 when the layout is stacked.

tkajtoch

Code changes look great, and updated functionality works as expected!

`112.0.0` ⏩ `112.1.0` [Questions? Please see our Kibana upgrade FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams) ## Changes - Update `span_links_badge.tsx` conditional `onClick` props on `EuiBadge` to satisfy TypeScript 93d7fae - Update snapshots 24c2f9a ## Package updates ### `@elastic/eui` [`v112.1.0`](https://github.com/elastic/eui/releases/tag/v112.1.0) - Updated `timeline` icon glyph ([#9331](elastic/eui#9331)) - Updated `EuiContextMenu` panels to allow passing `data-test-subj`, `aria-label`, `className` and `css` props ([#9323](elastic/eui#9323)) - Added "zoom in" functionality to time window buttons in `EuiSuperDatePicker` ([#9325](elastic/eui#9325)) - Added `displayName` to `EuiButton`, `EuiButtonEmpty`, `EuiDescriptionList` and its sub-components, `EuiEmptyPrompt`, `EuiFlexGrid`, `EuiFlexItem`, `EuiIcon`, `EuiImage`, `EuiLoadingLogo`, `EuiPageSection`, `EuiPageSidebar`, `EuiPageTemplate` and its sub-components and `EuiPanel` ([#9324](elastic/eui#9324)) - Added `fill` prop (defaults to `false`) to `EuiBadge` component that controls whether the badge should use filled or non-filled (less intense) colors. By default, badges will now render as the non-filled variant. ([#9306](elastic/eui#9306)) - Updated EuiBadge design to have rounded corners and improved paddings ([#9302](elastic/eui#9302)) **Bug fixes** - Fixed non-virtualized `EuiSelectable` throwing SyntaxError when selecting an option ([#9326](elastic/eui#9326)) - Fixed an issue where `push` flyouts in a stacked layout calculated the content offset based on the hidden main flyout's width instead of the visible child flyout's width ([#9322](elastic/eui#9322)) ### @elastic/eui-theme-borealis [`v5.4.0`](https://github.com/elastic/eui/blob/16f9b31d753d963d7738049e7a176fcaf6e81e73/packages/eui-theme-borealis/changelogs/CHANGELOG_2026.md#v540) - Updated `badgeBackground` color token value to equal `backgroundFilledText` ([#9306](elastic/eui#9306)) ### @elastic/eui-docusaurus-theme [`v2.2.0`](https://github.com/elastic/eui/blob/16f9b31d753d963d7738049e7a176fcaf6e81e73/packages/docusaurus-theme/changelogs/CHANGELOG_2026.md#v220) - Added `extraFiles` prop to the `Demo` component. It allows to pass extra files that will be added to the Codesandbox instance. ([#9317](elastic/eui#9317)) - Updated the `IMPORT_REGEX` to include relative imports so that all imports are removed from the snippet. All imported references have to be passed to `Demo` in the `scope` prop. ([#9317](elastic/eui#9317)) --------- Co-authored-by: Tomasz Kajtoch <tomasz.kajtoch@elastic.co>

`112.0.0` ⏩ `112.1.0` [Questions? Please see our Kibana upgrade FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams) ## Changes - Update `span_links_badge.tsx` conditional `onClick` props on `EuiBadge` to satisfy TypeScript 93d7fae - Update snapshots 24c2f9a ## Package updates ### `@elastic/eui` [`v112.1.0`](https://github.com/elastic/eui/releases/tag/v112.1.0) - Updated `timeline` icon glyph ([elastic#9331](elastic/eui#9331)) - Updated `EuiContextMenu` panels to allow passing `data-test-subj`, `aria-label`, `className` and `css` props ([elastic#9323](elastic/eui#9323)) - Added "zoom in" functionality to time window buttons in `EuiSuperDatePicker` ([elastic#9325](elastic/eui#9325)) - Added `displayName` to `EuiButton`, `EuiButtonEmpty`, `EuiDescriptionList` and its sub-components, `EuiEmptyPrompt`, `EuiFlexGrid`, `EuiFlexItem`, `EuiIcon`, `EuiImage`, `EuiLoadingLogo`, `EuiPageSection`, `EuiPageSidebar`, `EuiPageTemplate` and its sub-components and `EuiPanel` ([elastic#9324](elastic/eui#9324)) - Added `fill` prop (defaults to `false`) to `EuiBadge` component that controls whether the badge should use filled or non-filled (less intense) colors. By default, badges will now render as the non-filled variant. ([elastic#9306](elastic/eui#9306)) - Updated EuiBadge design to have rounded corners and improved paddings ([elastic#9302](elastic/eui#9302)) **Bug fixes** - Fixed non-virtualized `EuiSelectable` throwing SyntaxError when selecting an option ([elastic#9326](elastic/eui#9326)) - Fixed an issue where `push` flyouts in a stacked layout calculated the content offset based on the hidden main flyout's width instead of the visible child flyout's width ([elastic#9322](elastic/eui#9322)) ### @elastic/eui-theme-borealis [`v5.4.0`](https://github.com/elastic/eui/blob/16f9b31d753d963d7738049e7a176fcaf6e81e73/packages/eui-theme-borealis/changelogs/CHANGELOG_2026.md#v540) - Updated `badgeBackground` color token value to equal `backgroundFilledText` ([elastic#9306](elastic/eui#9306)) ### @elastic/eui-docusaurus-theme [`v2.2.0`](https://github.com/elastic/eui/blob/16f9b31d753d963d7738049e7a176fcaf6e81e73/packages/docusaurus-theme/changelogs/CHANGELOG_2026.md#v220) - Added `extraFiles` prop to the `Demo` component. It allows to pass extra files that will be added to the Codesandbox instance. ([elastic#9317](elastic/eui#9317)) - Updated the `IMPORT_REGEX` to include relative imports so that all imports are removed from the snippet. All imported references have to be passed to `Demo` in the `scope` prop. ([elastic#9317](elastic/eui#9317)) --------- Co-authored-by: Tomasz Kajtoch <tomasz.kajtoch@elastic.co>

fix(eui): use child flyout width for padding when stacked

e993c61

weronikaolejniczak self-assigned this Jan 16, 2026

chore(eui): add changelog

5f62974

weronikaolejniczak mentioned this pull request Jan 16, 2026

[EuiFlyout] Forward ref to the flyout components #9318

Merged

22 tasks

weronikaolejniczak marked this pull request as ready for review January 16, 2026 10:22

weronikaolejniczak requested a review from a team as a code owner January 16, 2026 10:22

weronikaolejniczak commented Jan 16, 2026

View reviewed changes

tkajtoch self-requested a review January 23, 2026 13:04

tkajtoch approved these changes Jan 26, 2026

View reviewed changes

weronikaolejniczak merged commit f8aaf5e into elastic:main Jan 26, 2026
6 checks passed

acstll mentioned this pull request Jan 26, 2026

Upgrade EUI to v112.1.0 elastic/kibana#250407

Merged

weronikaolejniczak deleted the fix/stacked-push-flyout-resize branch February 10, 2026 10:00

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[EuiFlyout] Use child flyout width for padding when stacked#9322

[EuiFlyout] Use child flyout width for padding when stacked#9322
weronikaolejniczak merged 2 commits intoelastic:mainfrom
weronikaolejniczak:fix/stacked-push-flyout-resize

weronikaolejniczak commented Jan 16, 2026 •

edited by tkajtoch

Loading

Uh oh!

elasticmachine commented Jan 16, 2026

Uh oh!

elasticmachine commented Jan 16, 2026

Uh oh!

weronikaolejniczak Jan 16, 2026

Uh oh!

tkajtoch left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

weronikaolejniczak commented Jan 16, 2026 • edited by tkajtoch Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Why are we making this change?

Screenshots #

Impact to users

QA

Specific checklist

General checklist

Uh oh!

elasticmachine commented Jan 16, 2026

💚 Build Succeeded

Uh oh!

elasticmachine commented Jan 16, 2026

💚 Build Succeeded

Uh oh!

weronikaolejniczak Jan 16, 2026

Choose a reason for hiding this comment

Uh oh!

tkajtoch left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

weronikaolejniczak commented Jan 16, 2026 •

edited by tkajtoch

Loading