Summary

1. Main flyout positioning (flyout.styles.ts)

   • Base positioning: right: var(--euiFlyoutOffsetInlineEnd, 0)
   • Update all percentage-based width calculations (s=25%, m=50%, l=75%, fill=90%) to use calc(Xvw - X * var(--euiFlyoutOffsetInlineEnd, 0px))
   • Dynamic fill width: calc((90vw - 0.9 * var(--euiFlyoutOffsetInlineEnd, 0px)) - [sibling-width]px)
   • Max-width override: calc(90vw - 0.9 * var(--euiFlyoutOffsetInlineEnd, 0px))

2. Child flyout positioning (flyout_child.tsx)

   • Position: right: calc([parent-width]px + var(--euiFlyoutOffsetInlineEnd, 0px))

3. Layout mode logic (layout_mode.ts)

   • Use useEuiThemeCSSVariables().globalCSSVariables to read offset value
   • Calculate effectiveViewportWidth = windowWidth - flyoutOffset
   • Use effectiveViewportWidth for both:
     • Layout mode threshold comparisons (side-by-side ↔ stacked)
     • getWidthFromSize() calculations to match CSS behavior
   • Will not use hysteresis (flicker prevention) as testing shows unacceptably large gaps when combined with offset

4. Storybook controls (flyout_manager.stories.tsx, flyout_sessions.stories.tsx)

   • Add flyoutOffset control (defaults to 0)
   • Use useEuiThemeCSSVariables().setGlobalCSSVariables() to set --euiFlyoutOffsetInlineEnd
   • Apply to all flyout manager stories (single-session, multi-session, multi-root)

5. Consistent application

   • Ensure compatibility with all flyout types: overlay, push
   • Ensure compatibility with all flyout sizes: s, m, l, fill, custom pixel values
   • Resizable flyouts will maintain their existing behavior (width is user-controlled, static px-based width)

6. Documentation

   • Add CSS API section to packages/eui/src/components/flyout/README.md (developer docs)
   • Add CSS Variables section to packages/website/docs/components/containers/flyout/index.mdx (public docs)
   • Document usage with useEuiThemeCSSVariables().setGlobalCSSVariables()

Why are we making this change?

Screenshots #

Impact to users

QA

Remove or strikethrough items that do not apply to your PR.

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)