Skip to content

Fix: Add styling to handle the text overflow#239768

Merged
efegurkan merged 2 commits intoelastic:mainfrom
efegurkan:fix-result-header-overflow
Oct 22, 2025
Merged

Fix: Add styling to handle the text overflow#239768
efegurkan merged 2 commits intoelastic:mainfrom
efegurkan:fix-result-header-overflow

Conversation

@efegurkan
Copy link
Member

@efegurkan efegurkan commented Oct 20, 2025

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
image

After
Screenshot 2025-10-16 at 20 15 19
Screenshot 2025-10-16 at 20 15 23

Checklist

Check the PR satisfies following conditions.

Reviewers should verify this PR satisfies this list as well.

  • Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support
  • Documentation was added for features that require explanation or tutorials
  • Unit or functional tests 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
  • 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 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
  • Review the backport guidelines 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.

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.
@efegurkan
Copy link
Member Author

@elasticmachine merge upstream

@elasticmachine
Copy link
Contributor

💛 Build succeeded, but was flaky

Failed CI Steps

Test Failures

  • [job] [logs] FTR Configs #94 / Cases - group 1 View case Assignees field logs in with default user assigns a user from the popover

Metrics [docs]

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id before after diff
contentConnectors 462.5KB 463.5KB +964.0B
enterpriseSearch 950.0KB 950.9KB +964.0B
searchIndices 193.3KB 194.3KB +964.0B
searchPlayground 235.2KB 236.2KB +964.0B
total +3.8KB

History

Copy link
Contributor

@wildemat wildemat left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM!

reminds me a bit of FormInfoField in search solution. Maybe we could port that to be shared in platform package sometime

@efegurkan efegurkan merged commit 32972ca into elastic:main Oct 22, 2025
13 checks passed
@kibanamachine
Copy link
Contributor

Starting backport for target branches: 8.19, 9.1, 9.2

https://github.com/elastic/kibana/actions/runs/18713789880

kibanamachine pushed a commit to kibanamachine/kibana that referenced this pull request Oct 22, 2025
## 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)
@kibanamachine
Copy link
Contributor

💔 Some backports could not be created

Status Branch Result
8.19 Backport failed because of merge conflicts
9.1 Backport failed because of merge conflicts
9.2

Note: Successful backport PRs will be merged automatically after passing CI.

Manual backport

To create the backport manually run:

node scripts/backport --pr 239768

Questions ?

Please refer to the Backport tool documentation

efegurkan added a commit to efegurkan/kibana that referenced this pull request Oct 22, 2025
## 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/rich_result_header.tsx
#	x-pack/platform/packages/shared/kbn-search-index-documents/components/result/styles.ts
@efegurkan
Copy link
Member Author

💚 All backports created successfully

Status Branch Result
9.1
8.19

Note: Successful backport PRs will be merged automatically after passing CI.

Questions ?

Please refer to the Backport tool documentation

efegurkan added a commit to efegurkan/kibana that referenced this pull request Oct 22, 2025
## 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 removed the v8.19.6 label Oct 22, 2025
kibanamachine added a commit that referenced this pull request Oct 23, 2025
# Backport

This will backport the following commits from `main` to `9.2`:
- [Fix: Add styling to handle the text overflow
(#239768)](#239768)

<!--- Backport version: 9.6.6 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sorenlouv/backport)

<!--BACKPORT [{"author":{"name":"Efe Gürkan
YALAMAN","email":"efeguerkan.yalaman@elastic.co"},"sourceCommit":{"committedDate":"2025-10-22T10:51:19Z","message":"Fix:
Add styling to handle the text overflow (#239768)\n\n## Summary\n\nThis
fixes a case where having too long id not wrapping and overflowing\nthe
popout by truncating the text and adding a copy button with tooltip\nto
show whole ID.\n\nBefore\n<img width=\"3192\" height=\"954\"
alt=\"image\"\nsrc=\"https://github.com/user-attachments/assets/84eb8772-a4ab-4310-b6f3-c1973b91948d\"\n/>\n\nAfter\n<img
width=\"341\" height=\"218\" alt=\"Screenshot 2025-10-16 at 20 15
19\"\nsrc=\"https://github.com/user-attachments/assets/b1dad5d6-3123-4710-baf6-3c362cfa2580\"\n/>\n<img
width=\"367\" height=\"234\" alt=\"Screenshot 2025-10-16 at 20 15
23\"\nsrc=\"https://github.com/user-attachments/assets/44606124-57b1-4a86-8071-89bca85860b9\"\n/>\n\n\n\n\n###
Checklist\n\nCheck the PR satisfies following conditions. \n\nReviewers
should verify this PR satisfies this list as well.\n\n- [x] Any text
added follows [EUI's
writing\nguidelines](https://elastic.github.io/eui/#/guidelines/writing),
uses\nsentence case text and includes
[i18n\nsupport](https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-i18n/README.md)\n-
[
]\n~[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)\nwas
added for features that require explanation or tutorials~\n- [ ] [Unit
or
functional\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\nwere
updated or added to match the most common scenarios\n- [ ] ~If a plugin
configuration key changed, check if it needs to be\nallowlisted in the
cloud and added to the
[docker\nlist](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker)~\n-
[ ] ~This was checked for breaking HTTP API changes, and any
breaking\nchanges have been approved by the breaking-change committee.
The\n`release_note:breaking` label should be applied in these
situations.~\n- [ ] ~[Flaky
Test\nRunner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1)
was\nused on any tests changed~\n- [ ] The PR description includes the
appropriate Release Notes section,\nand the correct `release_note:*`
label is applied per
the\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)\n-
[ ] Review the
[backport\nguidelines](https://docs.google.com/document/d/1VyN5k91e5OVumlc0Gb9RPa3h1ewuPE705nRtioPiTvY/edit?usp=sharing)\nand
apply applicable `backport:*` labels.\n\n\n## Release Note:\nFixed data
preview metadata popup visual issues when ID is too long.\nAdded a
tooltip and copy button to improve user experience.\n\nCo-authored-by:
Elastic Machine
<elasticmachine@users.noreply.github.com>","sha":"32972ca0ca2409a6b1c0a1dd7c0a499dbfae9401","branchLabelMapping":{"^v9.3.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:fix","Team:Search","backport:version","v9.2.0","v9.3.0","v9.1.6","v8.19.6"],"title":"Fix:
Add styling to handle the text
overflow","number":239768,"url":"https://github.com/elastic/kibana/pull/239768","mergeCommit":{"message":"Fix:
Add styling to handle the text overflow (#239768)\n\n## Summary\n\nThis
fixes a case where having too long id not wrapping and overflowing\nthe
popout by truncating the text and adding a copy button with tooltip\nto
show whole ID.\n\nBefore\n<img width=\"3192\" height=\"954\"
alt=\"image\"\nsrc=\"https://github.com/user-attachments/assets/84eb8772-a4ab-4310-b6f3-c1973b91948d\"\n/>\n\nAfter\n<img
width=\"341\" height=\"218\" alt=\"Screenshot 2025-10-16 at 20 15
19\"\nsrc=\"https://github.com/user-attachments/assets/b1dad5d6-3123-4710-baf6-3c362cfa2580\"\n/>\n<img
width=\"367\" height=\"234\" alt=\"Screenshot 2025-10-16 at 20 15
23\"\nsrc=\"https://github.com/user-attachments/assets/44606124-57b1-4a86-8071-89bca85860b9\"\n/>\n\n\n\n\n###
Checklist\n\nCheck the PR satisfies following conditions. \n\nReviewers
should verify this PR satisfies this list as well.\n\n- [x] Any text
added follows [EUI's
writing\nguidelines](https://elastic.github.io/eui/#/guidelines/writing),
uses\nsentence case text and includes
[i18n\nsupport](https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-i18n/README.md)\n-
[
]\n~[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)\nwas
added for features that require explanation or tutorials~\n- [ ] [Unit
or
functional\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\nwere
updated or added to match the most common scenarios\n- [ ] ~If a plugin
configuration key changed, check if it needs to be\nallowlisted in the
cloud and added to the
[docker\nlist](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker)~\n-
[ ] ~This was checked for breaking HTTP API changes, and any
breaking\nchanges have been approved by the breaking-change committee.
The\n`release_note:breaking` label should be applied in these
situations.~\n- [ ] ~[Flaky
Test\nRunner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1)
was\nused on any tests changed~\n- [ ] The PR description includes the
appropriate Release Notes section,\nand the correct `release_note:*`
label is applied per
the\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)\n-
[ ] Review the
[backport\nguidelines](https://docs.google.com/document/d/1VyN5k91e5OVumlc0Gb9RPa3h1ewuPE705nRtioPiTvY/edit?usp=sharing)\nand
apply applicable `backport:*` labels.\n\n\n## Release Note:\nFixed data
preview metadata popup visual issues when ID is too long.\nAdded a
tooltip and copy button to improve user experience.\n\nCo-authored-by:
Elastic Machine
<elasticmachine@users.noreply.github.com>","sha":"32972ca0ca2409a6b1c0a1dd7c0a499dbfae9401"}},"sourceBranch":"main","suggestedTargetBranches":["9.2","9.1","8.19"],"targetPullRequestStates":[{"branch":"9.2","label":"v9.2.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v9.3.0","branchLabelMappingKey":"^v9.3.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/239768","number":239768,"mergeCommit":{"message":"Fix:
Add styling to handle the text overflow (#239768)\n\n## Summary\n\nThis
fixes a case where having too long id not wrapping and overflowing\nthe
popout by truncating the text and adding a copy button with tooltip\nto
show whole ID.\n\nBefore\n<img width=\"3192\" height=\"954\"
alt=\"image\"\nsrc=\"https://github.com/user-attachments/assets/84eb8772-a4ab-4310-b6f3-c1973b91948d\"\n/>\n\nAfter\n<img
width=\"341\" height=\"218\" alt=\"Screenshot 2025-10-16 at 20 15
19\"\nsrc=\"https://github.com/user-attachments/assets/b1dad5d6-3123-4710-baf6-3c362cfa2580\"\n/>\n<img
width=\"367\" height=\"234\" alt=\"Screenshot 2025-10-16 at 20 15
23\"\nsrc=\"https://github.com/user-attachments/assets/44606124-57b1-4a86-8071-89bca85860b9\"\n/>\n\n\n\n\n###
Checklist\n\nCheck the PR satisfies following conditions. \n\nReviewers
should verify this PR satisfies this list as well.\n\n- [x] Any text
added follows [EUI's
writing\nguidelines](https://elastic.github.io/eui/#/guidelines/writing),
uses\nsentence case text and includes
[i18n\nsupport](https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-i18n/README.md)\n-
[
]\n~[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)\nwas
added for features that require explanation or tutorials~\n- [ ] [Unit
or
functional\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\nwere
updated or added to match the most common scenarios\n- [ ] ~If a plugin
configuration key changed, check if it needs to be\nallowlisted in the
cloud and added to the
[docker\nlist](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker)~\n-
[ ] ~This was checked for breaking HTTP API changes, and any
breaking\nchanges have been approved by the breaking-change committee.
The\n`release_note:breaking` label should be applied in these
situations.~\n- [ ] ~[Flaky
Test\nRunner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1)
was\nused on any tests changed~\n- [ ] The PR description includes the
appropriate Release Notes section,\nand the correct `release_note:*`
label is applied per
the\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)\n-
[ ] Review the
[backport\nguidelines](https://docs.google.com/document/d/1VyN5k91e5OVumlc0Gb9RPa3h1ewuPE705nRtioPiTvY/edit?usp=sharing)\nand
apply applicable `backport:*` labels.\n\n\n## Release Note:\nFixed data
preview metadata popup visual issues when ID is too long.\nAdded a
tooltip and copy button to improve user experience.\n\nCo-authored-by:
Elastic Machine
<elasticmachine@users.noreply.github.com>","sha":"32972ca0ca2409a6b1c0a1dd7c0a499dbfae9401"}},{"branch":"9.1","label":"v9.1.6","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"8.19","label":"v8.19.6","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: Efe Gürkan YALAMAN <efeguerkan.yalaman@elastic.co>
Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
@kibanamachine kibanamachine added the backport missing Added to PRs automatically when the are determined to be missing a backport. label Oct 23, 2025
@kibanamachine
Copy link
Contributor

Looks like this PR has backport PRs but they still haven't been merged. Please merge them ASAP to keep the branches relatively in sync.
cc: @efegurkan

@mistic mistic added v9.2.1 and removed v9.2.0 labels Oct 23, 2025
@kibanamachine
Copy link
Contributor

Looks like this PR has backport PRs but they still haven't been merged. Please merge them ASAP to keep the branches relatively in sync.
cc: @efegurkan

NicholasPeretti pushed a commit to NicholasPeretti/kibana that referenced this pull request Oct 27, 2025
## 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>
efegurkan added a commit that referenced this pull request Oct 27, 2025
# Backport

This will backport the following commits from `main` to `9.1`:
- [Fix: Add styling to handle the text overflow
(#239768)](#239768)

<!--- Backport version: 10.1.0 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sorenlouv/backport)

<!--BACKPORT [{"author":{"name":"Efe Gürkan
YALAMAN","email":"efeguerkan.yalaman@elastic.co"},"sourceCommit":{"committedDate":"2025-10-22T10:51:19Z","message":"Fix:
Add styling to handle the text overflow (#239768)\n\n## Summary\n\nThis
fixes a case where having too long id not wrapping and overflowing\nthe
popout by truncating the text and adding a copy button with tooltip\nto
show whole ID.\n\nBefore\n<img width=\"3192\" height=\"954\"
alt=\"image\"\nsrc=\"https://github.com/user-attachments/assets/84eb8772-a4ab-4310-b6f3-c1973b91948d\"\n/>\n\nAfter\n<img
width=\"341\" height=\"218\" alt=\"Screenshot 2025-10-16 at 20 15
19\"\nsrc=\"https://github.com/user-attachments/assets/b1dad5d6-3123-4710-baf6-3c362cfa2580\"\n/>\n<img
width=\"367\" height=\"234\" alt=\"Screenshot 2025-10-16 at 20 15
23\"\nsrc=\"https://github.com/user-attachments/assets/44606124-57b1-4a86-8071-89bca85860b9\"\n/>\n\n\n\n\n###
Checklist\n\nCheck the PR satisfies following conditions. \n\nReviewers
should verify this PR satisfies this list as well.\n\n- [x] Any text
added follows [EUI's
writing\nguidelines](https://elastic.github.io/eui/#/guidelines/writing),
uses\nsentence case text and includes
[i18n\nsupport](https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-i18n/README.md)\n-
[
]\n~[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)\nwas
added for features that require explanation or tutorials~\n- [ ] [Unit
or
functional\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\nwere
updated or added to match the most common scenarios\n- [ ] ~If a plugin
configuration key changed, check if it needs to be\nallowlisted in the
cloud and added to the
[docker\nlist](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker)~\n-
[ ] ~This was checked for breaking HTTP API changes, and any
breaking\nchanges have been approved by the breaking-change committee.
The\n`release_note:breaking` label should be applied in these
situations.~\n- [ ] ~[Flaky
Test\nRunner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1)
was\nused on any tests changed~\n- [ ] The PR description includes the
appropriate Release Notes section,\nand the correct `release_note:*`
label is applied per
the\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)\n-
[ ] Review the
[backport\nguidelines](https://docs.google.com/document/d/1VyN5k91e5OVumlc0Gb9RPa3h1ewuPE705nRtioPiTvY/edit?usp=sharing)\nand
apply applicable `backport:*` labels.\n\n\n## Release Note:\nFixed data
preview metadata popup visual issues when ID is too long.\nAdded a
tooltip and copy button to improve user experience.\n\nCo-authored-by:
Elastic Machine
<elasticmachine@users.noreply.github.com>","sha":"32972ca0ca2409a6b1c0a1dd7c0a499dbfae9401","branchLabelMapping":{"^v9.3.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:fix","Team:Search","backport:version","v9.2.0","v9.3.0","v9.1.6","v8.19.6"],"title":"Fix:
Add styling to handle the text
overflow","number":239768,"url":"https://github.com/elastic/kibana/pull/239768","mergeCommit":{"message":"Fix:
Add styling to handle the text overflow (#239768)\n\n## Summary\n\nThis
fixes a case where having too long id not wrapping and overflowing\nthe
popout by truncating the text and adding a copy button with tooltip\nto
show whole ID.\n\nBefore\n<img width=\"3192\" height=\"954\"
alt=\"image\"\nsrc=\"https://github.com/user-attachments/assets/84eb8772-a4ab-4310-b6f3-c1973b91948d\"\n/>\n\nAfter\n<img
width=\"341\" height=\"218\" alt=\"Screenshot 2025-10-16 at 20 15
19\"\nsrc=\"https://github.com/user-attachments/assets/b1dad5d6-3123-4710-baf6-3c362cfa2580\"\n/>\n<img
width=\"367\" height=\"234\" alt=\"Screenshot 2025-10-16 at 20 15
23\"\nsrc=\"https://github.com/user-attachments/assets/44606124-57b1-4a86-8071-89bca85860b9\"\n/>\n\n\n\n\n###
Checklist\n\nCheck the PR satisfies following conditions. \n\nReviewers
should verify this PR satisfies this list as well.\n\n- [x] Any text
added follows [EUI's
writing\nguidelines](https://elastic.github.io/eui/#/guidelines/writing),
uses\nsentence case text and includes
[i18n\nsupport](https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-i18n/README.md)\n-
[
]\n~[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)\nwas
added for features that require explanation or tutorials~\n- [ ] [Unit
or
functional\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\nwere
updated or added to match the most common scenarios\n- [ ] ~If a plugin
configuration key changed, check if it needs to be\nallowlisted in the
cloud and added to the
[docker\nlist](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker)~\n-
[ ] ~This was checked for breaking HTTP API changes, and any
breaking\nchanges have been approved by the breaking-change committee.
The\n`release_note:breaking` label should be applied in these
situations.~\n- [ ] ~[Flaky
Test\nRunner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1)
was\nused on any tests changed~\n- [ ] The PR description includes the
appropriate Release Notes section,\nand the correct `release_note:*`
label is applied per
the\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)\n-
[ ] Review the
[backport\nguidelines](https://docs.google.com/document/d/1VyN5k91e5OVumlc0Gb9RPa3h1ewuPE705nRtioPiTvY/edit?usp=sharing)\nand
apply applicable `backport:*` labels.\n\n\n## Release Note:\nFixed data
preview metadata popup visual issues when ID is too long.\nAdded a
tooltip and copy button to improve user experience.\n\nCo-authored-by:
Elastic Machine
<elasticmachine@users.noreply.github.com>","sha":"32972ca0ca2409a6b1c0a1dd7c0a499dbfae9401"}},"sourceBranch":"main","suggestedTargetBranches":["9.1","8.19"],"targetPullRequestStates":[{"branch":"9.2","label":"v9.2.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"url":"https://github.com/elastic/kibana/pull/240058","number":240058,"state":"OPEN"},{"branch":"main","label":"v9.3.0","branchLabelMappingKey":"^v9.3.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/239768","number":239768,"mergeCommit":{"message":"Fix:
Add styling to handle the text overflow (#239768)\n\n## Summary\n\nThis
fixes a case where having too long id not wrapping and overflowing\nthe
popout by truncating the text and adding a copy button with tooltip\nto
show whole ID.\n\nBefore\n<img width=\"3192\" height=\"954\"
alt=\"image\"\nsrc=\"https://github.com/user-attachments/assets/84eb8772-a4ab-4310-b6f3-c1973b91948d\"\n/>\n\nAfter\n<img
width=\"341\" height=\"218\" alt=\"Screenshot 2025-10-16 at 20 15
19\"\nsrc=\"https://github.com/user-attachments/assets/b1dad5d6-3123-4710-baf6-3c362cfa2580\"\n/>\n<img
width=\"367\" height=\"234\" alt=\"Screenshot 2025-10-16 at 20 15
23\"\nsrc=\"https://github.com/user-attachments/assets/44606124-57b1-4a86-8071-89bca85860b9\"\n/>\n\n\n\n\n###
Checklist\n\nCheck the PR satisfies following conditions. \n\nReviewers
should verify this PR satisfies this list as well.\n\n- [x] Any text
added follows [EUI's
writing\nguidelines](https://elastic.github.io/eui/#/guidelines/writing),
uses\nsentence case text and includes
[i18n\nsupport](https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-i18n/README.md)\n-
[
]\n~[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)\nwas
added for features that require explanation or tutorials~\n- [ ] [Unit
or
functional\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\nwere
updated or added to match the most common scenarios\n- [ ] ~If a plugin
configuration key changed, check if it needs to be\nallowlisted in the
cloud and added to the
[docker\nlist](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker)~\n-
[ ] ~This was checked for breaking HTTP API changes, and any
breaking\nchanges have been approved by the breaking-change committee.
The\n`release_note:breaking` label should be applied in these
situations.~\n- [ ] ~[Flaky
Test\nRunner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1)
was\nused on any tests changed~\n- [ ] The PR description includes the
appropriate Release Notes section,\nand the correct `release_note:*`
label is applied per
the\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)\n-
[ ] Review the
[backport\nguidelines](https://docs.google.com/document/d/1VyN5k91e5OVumlc0Gb9RPa3h1ewuPE705nRtioPiTvY/edit?usp=sharing)\nand
apply applicable `backport:*` labels.\n\n\n## Release Note:\nFixed data
preview metadata popup visual issues when ID is too long.\nAdded a
tooltip and copy button to improve user experience.\n\nCo-authored-by:
Elastic Machine
<elasticmachine@users.noreply.github.com>","sha":"32972ca0ca2409a6b1c0a1dd7c0a499dbfae9401"}},{"branch":"9.1","label":"v9.1.6","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"8.19","label":"v8.19.6","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

---------

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
@kibanamachine kibanamachine added v9.1.7 and removed backport missing Added to PRs automatically when the are determined to be missing a backport. labels Oct 27, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment