[EuiPageHeader] Fix single right side items from overflowing past its max width

[cee-chen]

Summary

Partially addresses https://github.com/elastic/kibana/issues/197892

The changes made in #8044 overlooked some edge cases with very wide single right side items.

Before	After

QA

• https://eui.elastic.co/pr_8110/storybook/?path=/story/layout-euipage-euipageheader-euipageheadercontent--truncated-right-side-items

General checklist

• Browser QA
  • [x] Checked in mobile
  • [x] Checked in Chrome, Safari, Edge, and Firefox ~- [ ] Checked in both light and dark modes~ ~- [ ] Checked for accessibility including keyboard-only and screenreader modes~
• Docs site QA - N/A
• Code quality checklist ~- [ ] Added or updated jest and cypress tests~
  • [x] Updated visual regression tests
• Release checklist
  • [x] 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 - N/A

[kibanamachine]

Preview staging links for this PR:

• Docs site: https://eui.elastic.co/pr_8110/
• Storybook: https://eui.elastic.co/pr_8110/storybook
• New docs: https://eui.elastic.co/pr_8110/new-docs

[elasticmachine]

:green_heart: Build Succeeded

• Buildkite Build
• Commit: c810d154c720322d9a558484dd5fa3b10dfbce1c

[cee-chen]

Note to self: backport these fixes to Kibana 8.16