Skip to content

[EuiPageTemplate.Header] Having 2 or more rightSideItems on small screens looks ugly. #8039

@alexwizp

Description

@alexwizp

This issue was identified while addressing Kibana PR #193880. On smaller screens (at certain resolutions), using rightSideItems with children leads a user-unfriendly UI. This might explain why the buttons were originally placed within the pageTitle property which is not correct from the a11y perspective.

Image

Currently, when rightSideItems are used, we render two FlexItem components: the first includes the title, description, and child content, while the second holds the rightSideItems. It might be worth considering moving the description and child content outside of the FlexGroup for better layout management.

Image

Any ideas?

Metadata

Metadata

Assignees

Type

No type
No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions