elastic/eui

[EuiPageHeader] Tabs in the EuiPageHeader push rightSideItems to the right and causes overflow

prgueza opened this issue · 0 comments

prgueza commented

Describe the bug

This is somewhat in between of a bug and a feature request. The issue we are having is that the way the EuiPageHeader is structured does not allow for having several tabs and a long list of items in the rightSideItems.

We would expect the tabs to be be underneath the pageTitle, description and rightSideItems, so tabs would not push the rightSideItems to the right when adding many of them.

I'm unsure how much of a problem it is to restructure the header in a way that this behaviour is fixed. Perhaps it is just us overusing these features, but we find the current approach we are using quite handy ux-wise for our use case.

Down below you can find a screenshot showing the problem or you can access this sandbox to reproduce it.

Impact and severity

It mainly impacts users with small screens but it does not break the application, it is just a usability issue.

Environment and versions

  • EUI version: Currently using 95.1.0 but is not fixed in the latest version
  • React version: 17.0.2
  • Browser: Arc, Google Chrome
  • Operating System: Mac OS Sequoia 15.0

To Reproduce

  1. Create an empty page using the EuiTemplate.
  2. Add a EuiTemplate.Header component with rightSideItems and many tabs.
  3. Check how the header overflows to the right.

Expected behavior

Tabs would not push the rightSideItems to the right.

Minimum reproducible sandbox

https://codesandbox.io/p/sandbox/vibrant-bhabha-czlvzp?welcomeVSCode=true

Screenshots

Image
Image