Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
prgueza opened this issue Sep 20, 2024 · 0 comments · Fixed by #8044
Closed
Assignees
Labels

Comments

@prgueza
Copy link

prgueza commented Sep 20, 2024

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

@prgueza prgueza added bug ⚠️ needs validation For bugs that need confirmation as to whether they're reproducible labels Sep 20, 2024
@cee-chen cee-chen removed the ⚠️ needs validation For bugs that need confirmation as to whether they're reproducible label Sep 24, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants