[EuiFlyoutResizable] Do not extend resize click area past flyout for flyouts with no overlays

[cee-chen]

Summary

closes #7988

This PR fixes the scenario where the content to the left of the resizable flyout has a scrollbar (or any other clickable element that butts up against the flyout), and the placement of the resize border/indicator button prevents the thing it's overlaying from being clicked:

Before	After

FYI that I kept the centered styling on flyouts with overlay masks, because those overlays will close the entire flyout on outside click which feels super disruptive - I felt the extra space there would be more beneficial UX-wise to help minimize that for users who attempt to resize and are a few pixels off.

QA

• Go to https://eui.elastic.co/pr_8010/storybook/?path=/story/layout-euiflyout-euiflyoutresizable--playground
• Confirm the resize indicator is still centered on the border and overlays over the mask by default
• Change the ownFocus control to false
• Confirm the resize indicator is now contained within the flyout only
• Change the flyout type to push
• Confirm the resize indicator is still contained within the flyout only

General checklist

• Browser QA
  • Checked in both light and dark modes
  • Checked in Chrome, Safari, Edge, and Firefox
  • Checked for accessibility including keyboard-only and screenreader modes
    - [ ] Checked in mobile
• Docs site QA - N/A
• Code quality checklist
  - [ ] Added or updated jest and cypress tests
  • Updated visual regression tests - Looking into this, but Loki doesn't play well with focus/click events
• 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)
• 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)

[cee-chen]

@MichaelMarcialis Could I get a designer's UX review on this? I'm not sure whether the choice to keep the overlay flyout center-aligned was the right one (see PR description for rationale) or if consistency is more important.

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: 0fd78e6

[mgadewoll]

🚢 🐈‍⬛ Straight forward and clean implementation, LGTM! 🎉

[MichaelMarcialis]

Thanks for the ping, @cee-chen. For EuiFlyout specifically, I think this solution works. While the push flyout is offset right and not centered, it still has the same amount of "grab zone" as it's overlay counterpart, which is the consistency that matters most in this case IMO.

That said, this issue has brought another question to mind: should we offer a prop to apply this kind of offset directly on the EuiResizableButton component as well? The reason I ask is because this issue where a scrollbar is obscured by the resize button/handle can also appear when using vanilla EuiResizableContainer components. It's actually visible in our doc examples currently. Thoughts?

[cee-chen]

@MichaelMarcialis Yes, I totally agree we should add a fix/prop for it for EuiResizableContainer usage as well! I have a separate branch for that if that's okay, I'll loop you in once it's ready for review!

[cee-chen]

Follow-up PR: #8021