[Flyout System] resizable flyouts cause strange stacking effects

[tsullivan]

Reported by @tsullivan

Describe the bug When a main or child flyout in the Flyout System is resizable, the user is able to drag the boundary to a point that causes the layout mode to be stacked. This causes content to move around while they are trying to drag it a confusing experience.

Impact and severity Impacts only resizable flyouts in an active session in the flyout system.

Environment and versions

Minimum reproducible sandbox

const SandBoxFlyout: React.FC = () => (
  <EuiFlyout
    session="start"
    onClose={() => {}}
    resizable
    flyoutMenuProps={{ title: 'Sandbox Flyout' }}
  >
    <EuiFlyoutHeader>
      <EuiTitle>
        <h2>Resizable Main Flyout</h2>
      </EuiTitle>
    </EuiFlyoutHeader>
    <EuiFlyoutBody>
      <EuiText>
        <p>This is a sandbox flyout for testing purposes.</p>
      </EuiText>
    </EuiFlyoutBody>
    <EuiFlyout
      onClose={() => {}}
      resizable
      flyoutMenuProps={{ title: 'Sandbox Flyout Child' }}
    >
      <EuiFlyoutBody>
        <EuiText>
          <p>This is a child flyout.</p>
        </EuiText>
      </EuiFlyoutBody>
    </EuiFlyout>
  </EuiFlyout>
);

To Reproduce Move the drag handles around in the main and child flyouts

Expected behavior The drag handler should stop before the user is allowed to resize the flyout too large

Screenshots (Optional)

https://github.com/user-attachments/assets/0d77e6b3-5f5d-408f-b97c-9f8630d5e2c7

Additional context (Optional) The fix might require an implicit max width for the flyout that incorporates the size of its sibling flyout. Something like: max-width: calc(90vw - siblingWidth)

I believe we use that calculation for fill mode flyouts, and it seems to work well.

[JasonStoltz]

The EUI team is moving this through Triage to our backlog, but we're assuming this bug will be prioritized and worked by the Shared UX team as part of the Flyout System project.

[tsullivan]

Jason is correct. It looks like there is automation adding sub issues of https://github.com/elastic/kibana-team/issues/1844 onto the EUI project board, but the Flyout system implementation is expected to continue to be owned by the SharedUX team.