[EuiListItemLayout][EuiSelectableTemplateSitewide] Fix text content alignment#9669
Merged
mgadewoll merged 9 commits intoMay 26, 2026
Merged
Conversation
- the selector was too broad and applied to single child nodes + text as well, resulting in misalignment. Since CSS doesn't offer us any proper solution to detect non-wrapped text as children, we'll rather need to apply the style for known use cases
Contributor
There was a problem hiding this comment.
Pull request overview
This PR adjusts EuiListItemLayout’s internal text alignment styling to prevent highlighted text (e.g., <mark> wrappers used by search highlighting) from shifting list item content alignment, with a targeted workaround for an existing Kibana EuiHealth usage.
Changes:
- Removed broad
:only-child/:first-childvertical-align rules and replaced them with a specific.euiHealthalignment rule inEuiListItemLayouttext styling. - Added a new
CustomContentStorybook story to exercise various child content patterns, and updated the kitchen sink story labels. - Added an upcoming changelog entry describing the visual alignment fix.
Reviewed changes
Copilot reviewed 3 out of 7 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| packages/eui/src/components/list_item_layout/_list_item_layout.styles.ts | Narrows alignment styling to avoid affecting highlighted text while keeping a targeted EuiHealth alignment fix. |
| packages/eui/src/components/list_item_layout/_list_item_layout.stories.tsx | Adds/updates VRT-only stories to cover custom content and alignment scenarios. |
| packages/eui/changelogs/upcoming/9669.md | Documents the fix in the upcoming changelog. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
weronikaolejniczak
approved these changes
May 26, 2026
Contributor
weronikaolejniczak
left a comment
weronikaolejniczak
left a comment
There was a problem hiding this comment.
Very simple fix. I can confirm this is working for EuiSelectableTemplateSitewide. No regression to the EuiListItemLayout 👍🏻 🟢
….styles.ts Co-authored-by: Weronika Olejniczak <32842468+weronikaolejniczak@users.noreply.github.com>
Collaborator
💚 Build SucceededHistory
cc @mgadewoll |
Collaborator
💚 Build Succeeded
History
cc @mgadewoll |
acstll
added a commit
to elastic/kibana
that referenced
this pull request
May 27, 2026
## Dependency updates - `@elastic/eui` - v116.1.0 ⏩ v116.2.0 --- ## Package updates ### @elastic/eui [`v116.2.0`](https://github.com/elastic/eui/blob/main/packages/eui/changelogs/CHANGELOG_2026.md) - Added experimental support for always-visible sticky horizontal scrollbars in `EuiTable`, `EuiBasicTable` and `EuiInMemoryTable` useful for dense tables that exceed the height of the viewport. This feature is currently opt-in and can be enabled by setting `stickyScrollbar: true`. ([#9674](elastic/eui#9674)) - Added `significantEvents` glyph to `EuiIcon` ([#9665](elastic/eui#9665)) **Bug fixes** - Fixed `EuiDataGrid` incorrectly styling disabled `cellActions` icon buttons and making them look like they were not disabled ([#9672](elastic/eui#9672)) - Fixed a visual misalignment on `EuiSelectableTemplateSitewide` list items when search terms are highlighted ([#9669](elastic/eui#9669)) **Dependency updates** - Updated `uuid` to v14.0.0 ([#9663](elastic/eui#9663)) Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
smith
pushed a commit
to smith/kibana
that referenced
this pull request
May 27, 2026
## Dependency updates - `@elastic/eui` - v116.1.0 ⏩ v116.2.0 --- ## Package updates ### @elastic/eui [`v116.2.0`](https://github.com/elastic/eui/blob/main/packages/eui/changelogs/CHANGELOG_2026.md) - Added experimental support for always-visible sticky horizontal scrollbars in `EuiTable`, `EuiBasicTable` and `EuiInMemoryTable` useful for dense tables that exceed the height of the viewport. This feature is currently opt-in and can be enabled by setting `stickyScrollbar: true`. ([elastic#9674](elastic/eui#9674)) - Added `significantEvents` glyph to `EuiIcon` ([elastic#9665](elastic/eui#9665)) **Bug fixes** - Fixed `EuiDataGrid` incorrectly styling disabled `cellActions` icon buttons and making them look like they were not disabled ([elastic#9672](elastic/eui#9672)) - Fixed a visual misalignment on `EuiSelectableTemplateSitewide` list items when search terms are highlighted ([elastic#9669](elastic/eui#9669)) **Dependency updates** - Updated `uuid` to v14.0.0 ([elastic#9663](elastic/eui#9663)) Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
This PR updates
EuiListItemLayout(internal component) to fix unexpected list item alignment e.g. inEuiSelectableTemplateSitewidewhen highlighting is applied.The issue was that a previous added style that was meant to help with custom content alignment, was too broad and would apply to children if the node was a single child + text (as text by itself is not considered a child as it's not a node by the CSS selector). There is no way for us to generically apply it to all cases this way, as non-wrapped text would always break it. Instead we can apply the style to known cases instead (until such cases are migrated to the appropriate API - using the
prependslot - on consumer side) and anything else needs to be handled on consumer side, as they pass their custom content.API Changes
⚪ No API changes
Screenshots
Screen.Recording.2026-05-20.at.13.39.23.mov
Impact Assessment
Note: Most PRs should be tested in Kibana to help gauge their Impact before merging.
Impact level: 🟢 None
ℹ️ The changes were tested in Kibana CI
💻 Kibana-a-la-carte
Release Readiness
Documentation: {link to docs page(s)}Figma: {link to Figma or issue}Migration guide: {steps or link, for breaking/visual changes or deprecations}Adoption plan (new features): {link to issue/doc or outline who will integrate this and where}QA instructions for reviewer
EuiSelectabletemplateSitewide(storybook), type something in the search that matches a list item and verify that highlighted item text in is correctly aligned with non highlighted textEuiListItemLayoutkitchen sink (storybook) looks fine (no unexpected misalignments)Checklist before marking Ready for Review
QA: Tested docs changesBreaking changes: Addedbreaking changelabel (if applicable)Reviewer checklist