Skip to content

[8.19] Fix: Add styling to handle the text overflow (#239768)#240085

Closed
efegurkan wants to merge 1 commit intoelastic:8.19from
efegurkan:backport/8.19/pr-239768
Closed

[8.19] Fix: Add styling to handle the text overflow (#239768)#240085
efegurkan wants to merge 1 commit intoelastic:8.19from
efegurkan:backport/8.19/pr-239768

Conversation

@efegurkan
Copy link
Member

Backport

This will backport the following commits from main to 8.19:

Questions ?

Please refer to the Backport tool documentation

## Summary

This fixes a case where having too long id not wrapping and overflowing
the popout by truncating the text and adding a copy button with tooltip
to show whole ID.

Before
<img width="3192" height="954" alt="image"
src="https://github.com/user-attachments/assets/84eb8772-a4ab-4310-b6f3-c1973b91948d"
/>

After
<img width="341" height="218" alt="Screenshot 2025-10-16 at 20 15 19"
src="https://github.com/user-attachments/assets/b1dad5d6-3123-4710-baf6-3c362cfa2580"
/>
<img width="367" height="234" alt="Screenshot 2025-10-16 at 20 15 23"
src="https://github.com/user-attachments/assets/44606124-57b1-4a86-8071-89bca85860b9"
/>

### Checklist

Check the PR satisfies following conditions.

Reviewers should verify this PR satisfies this list as well.

- [x] Any text added follows [EUI's writing
guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses
sentence case text and includes [i18n
support](https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-i18n/README.md)
- [ ]
~[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)
was added for features that require explanation or tutorials~
- [ ] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios
- [ ] ~If a plugin configuration key changed, check if it needs to be
allowlisted in the cloud and added to the [docker
list](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker)~
- [ ] ~This was checked for breaking HTTP API changes, and any breaking
changes have been approved by the breaking-change committee. The
`release_note:breaking` label should be applied in these situations.~
- [ ] ~[Flaky Test
Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was
used on any tests changed~
- [ ] The PR description includes the appropriate Release Notes section,
and the correct `release_note:*` label is applied per the
[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)
- [ ] Review the [backport
guidelines](https://docs.google.com/document/d/1VyN5k91e5OVumlc0Gb9RPa3h1ewuPE705nRtioPiTvY/edit?usp=sharing)
and apply applicable `backport:*` labels.

## Release Note:
Fixed data preview metadata popup visual issues when ID is too long.
Added a tooltip and copy button to improve user experience.

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
(cherry picked from commit 32972ca)

# Conflicts:
#	x-pack/platform/packages/shared/kbn-search-index-documents/components/result/styles.ts
#	x-pack/solutions/search/packages/kbn-search-index-documents/components/result/rich_result_header.tsx
@efegurkan efegurkan added the backport This PR is a backport of another PR label Oct 22, 2025
@efegurkan efegurkan enabled auto-merge (squash) October 22, 2025 12:16
@efegurkan efegurkan closed this Oct 22, 2025
auto-merge was automatically disabled October 22, 2025 12:31

Pull request was closed

@elasticmachine
Copy link
Contributor

elasticmachine commented Oct 22, 2025

💔 Build Failed

Failed CI Steps

History

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

backport This PR is a backport of another PR

2 participants