fix(apm): prevent key column from shrinking in metadata key-value tables#275941
Merged
jennypavlova merged 2 commits intoJul 2, 2026
Merged
Conversation
Kibana's global EuiProvider sets tableLayout: 'auto' for all EuiTable instances. With auto layout, long values (exception messages, attribute URLs) cause the value column to dominate, pushing the key column too narrow to read. Adding white-space: nowrap to the key cell forces the browser's table layout algorithm to respect the full field name width as the column's minimum — it can never shrink below the longest key. The value column gets the remaining space and wraps normally. Closes elastic#275904
jennypavlova
added
release_note:fix
backport:version
jennypavlova
added
v9.4.0
Team:obs-presentation
|
Pinging @elastic/obs-presentation-team (Team:obs-presentation) |
jennypavlova
enabled auto-merge (squash)
July 2, 2026 12:11
Contributor
💛 Build succeeded, but was flaky
Failed CI Steps
Test Failures
Metrics [docs]Async chunks
|
Contributor
|
Starting backport for target branches: 9.4 |
Contributor
💚 All backports created successfully
Note: Successful backport PRs will be merged automatically after passing CI. Questions ?Please refer to the Backport tool documentation |
kibanamachine
added a commit
that referenced
this pull request
Jul 2, 2026
…ue tables (#275941) (#275966) # Backport This will backport the following commits from `main` to `9.4`: - [fix(apm): prevent key column from shrinking in metadata key-value tables (#275941)](#275941) <!--- Backport version: 9.6.6 --> ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sorenlouv/backport) <!--BACKPORT [{"author":{"name":"jennypavlova","email":"dzheni.pavlova@elastic.co"},"sourceCommit":{"committedDate":"2026-07-02T13:03:11Z","message":"fix(apm): prevent key column from shrinking in metadata key-value tables (#275941)\n\n## Summary\n\n- The APM errors metadata table renders the key column too narrow to\nread in sections with long values (e.g. `attributes`, `exception`). This\nis caused by Kibana's global `EuiProvider` setting `tableLayout: 'auto'`\non all `EuiTable` instances — with auto layout the browser lets the\nvalue column dominate, shrinking the key column.\n- Fix: add `style={{ whiteSpace: 'nowrap' }}` on the key\n`EuiTableRowCell` in `KeyValueTable`. This forces the browser's table\nlayout algorithm to guarantee the key column is always at least as wide\nas the longest field name. The value column gets the remaining space and\nwraps normally.\n- Affects both consumers of `KeyValueTable`: APM metadata sections and\nthe stacktrace local variables panel.\n\n| Before | After |\n| ------ | ------- |\n| <img width=\"1913\" height=\"934\" alt=\"image\"\nsrc=\"https://github.com/user-attachments/assets/599552d4-0d9a-4c38-8e60-df100c9be7de\"\n/> | <img width=\"2578\" height=\"1214\" alt=\"image\"\nsrc=\"https://github.com/user-attachments/assets/2cc27f6f-551b-4038-88e9-00e1e83df863\"\n/> |\n| <img width=\"1917\" height=\"933\" alt=\"image\"\nsrc=\"https://github.com/user-attachments/assets/ae3250e4-89bb-418e-a142-7b6e37503a73\"\n/> | <img width=\"2316\" height=\"1406\" alt=\"image\"\nsrc=\"https://github.com/user-attachments/assets/419b7f9f-d464-4c6b-8c07-e46af3f1d17f\"\n/> |\n\n\n\nhttps://github.com/user-attachments/assets/5d1a8be8-4fc7-4877-88ec-37db606979d4\n\n\n## References\n\nCloses #275904","sha":"52c51d294868d1e1df2f4f458b25e5343ee1a068","branchLabelMapping":{"^v9.5.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:fix","backport:version","v9.4.0","Team:obs-presentation","v9.5.0"],"title":"fix(apm): prevent key column from shrinking in metadata key-value tables","number":275941,"url":"https://github.com/elastic/kibana/pull/275941","mergeCommit":{"message":"fix(apm): prevent key column from shrinking in metadata key-value tables (#275941)\n\n## Summary\n\n- The APM errors metadata table renders the key column too narrow to\nread in sections with long values (e.g. `attributes`, `exception`). This\nis caused by Kibana's global `EuiProvider` setting `tableLayout: 'auto'`\non all `EuiTable` instances — with auto layout the browser lets the\nvalue column dominate, shrinking the key column.\n- Fix: add `style={{ whiteSpace: 'nowrap' }}` on the key\n`EuiTableRowCell` in `KeyValueTable`. This forces the browser's table\nlayout algorithm to guarantee the key column is always at least as wide\nas the longest field name. The value column gets the remaining space and\nwraps normally.\n- Affects both consumers of `KeyValueTable`: APM metadata sections and\nthe stacktrace local variables panel.\n\n| Before | After |\n| ------ | ------- |\n| <img width=\"1913\" height=\"934\" alt=\"image\"\nsrc=\"https://github.com/user-attachments/assets/599552d4-0d9a-4c38-8e60-df100c9be7de\"\n/> | <img width=\"2578\" height=\"1214\" alt=\"image\"\nsrc=\"https://github.com/user-attachments/assets/2cc27f6f-551b-4038-88e9-00e1e83df863\"\n/> |\n| <img width=\"1917\" height=\"933\" alt=\"image\"\nsrc=\"https://github.com/user-attachments/assets/ae3250e4-89bb-418e-a142-7b6e37503a73\"\n/> | <img width=\"2316\" height=\"1406\" alt=\"image\"\nsrc=\"https://github.com/user-attachments/assets/419b7f9f-d464-4c6b-8c07-e46af3f1d17f\"\n/> |\n\n\n\nhttps://github.com/user-attachments/assets/5d1a8be8-4fc7-4877-88ec-37db606979d4\n\n\n## References\n\nCloses #275904","sha":"52c51d294868d1e1df2f4f458b25e5343ee1a068"}},"sourceBranch":"main","suggestedTargetBranches":["9.4"],"targetPullRequestStates":[{"branch":"9.4","label":"v9.4.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v9.5.0","branchLabelMappingKey":"^v9.5.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/275941","number":275941,"mergeCommit":{"message":"fix(apm): prevent key column from shrinking in metadata key-value tables (#275941)\n\n## Summary\n\n- The APM errors metadata table renders the key column too narrow to\nread in sections with long values (e.g. `attributes`, `exception`). This\nis caused by Kibana's global `EuiProvider` setting `tableLayout: 'auto'`\non all `EuiTable` instances — with auto layout the browser lets the\nvalue column dominate, shrinking the key column.\n- Fix: add `style={{ whiteSpace: 'nowrap' }}` on the key\n`EuiTableRowCell` in `KeyValueTable`. This forces the browser's table\nlayout algorithm to guarantee the key column is always at least as wide\nas the longest field name. The value column gets the remaining space and\nwraps normally.\n- Affects both consumers of `KeyValueTable`: APM metadata sections and\nthe stacktrace local variables panel.\n\n| Before | After |\n| ------ | ------- |\n| <img width=\"1913\" height=\"934\" alt=\"image\"\nsrc=\"https://github.com/user-attachments/assets/599552d4-0d9a-4c38-8e60-df100c9be7de\"\n/> | <img width=\"2578\" height=\"1214\" alt=\"image\"\nsrc=\"https://github.com/user-attachments/assets/2cc27f6f-551b-4038-88e9-00e1e83df863\"\n/> |\n| <img width=\"1917\" height=\"933\" alt=\"image\"\nsrc=\"https://github.com/user-attachments/assets/ae3250e4-89bb-418e-a142-7b6e37503a73\"\n/> | <img width=\"2316\" height=\"1406\" alt=\"image\"\nsrc=\"https://github.com/user-attachments/assets/419b7f9f-d464-4c6b-8c07-e46af3f1d17f\"\n/> |\n\n\n\nhttps://github.com/user-attachments/assets/5d1a8be8-4fc7-4877-88ec-37db606979d4\n\n\n## References\n\nCloses #275904","sha":"52c51d294868d1e1df2f4f458b25e5343ee1a068"}}]}] BACKPORT--> Co-authored-by: jennypavlova <dzheni.pavlova@elastic.co>
MykhailoKondrat
pushed a commit
to MykhailoKondrat/kibana
that referenced
this pull request
Jul 2, 2026
…les (elastic#275941) ## Summary - The APM errors metadata table renders the key column too narrow to read in sections with long values (e.g. `attributes`, `exception`). This is caused by Kibana's global `EuiProvider` setting `tableLayout: 'auto'` on all `EuiTable` instances — with auto layout the browser lets the value column dominate, shrinking the key column. - Fix: add `style={{ whiteSpace: 'nowrap' }}` on the key `EuiTableRowCell` in `KeyValueTable`. This forces the browser's table layout algorithm to guarantee the key column is always at least as wide as the longest field name. The value column gets the remaining space and wraps normally. - Affects both consumers of `KeyValueTable`: APM metadata sections and the stacktrace local variables panel. | Before | After | | ------ | ------- | | <img width="1913" height="934" alt="image" src="https://github.com/user-attachments/assets/599552d4-0d9a-4c38-8e60-df100c9be7de" /> | <img width="2578" height="1214" alt="image" src="https://github.com/user-attachments/assets/2cc27f6f-551b-4038-88e9-00e1e83df863" /> | | <img width="1917" height="933" alt="image" src="https://github.com/user-attachments/assets/ae3250e4-89bb-418e-a142-7b6e37503a73" /> | <img width="2316" height="1406" alt="image" src="https://github.com/user-attachments/assets/419b7f9f-d464-4c6b-8c07-e46af3f1d17f" /> | https://github.com/user-attachments/assets/5d1a8be8-4fc7-4877-88ec-37db606979d4 ## References Closes elastic#275904
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
3 participants
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
attributes,exception). This is caused by Kibana's globalEuiProvidersettingtableLayout: 'auto'on allEuiTableinstances — with auto layout the browser lets the value column dominate, shrinking the key column.style={{ whiteSpace: 'nowrap' }}on the keyEuiTableRowCellinKeyValueTable. This forces the browser's table layout algorithm to guarantee the key column is always at least as wide as the longest field name. The value column gets the remaining space and wraps normally.KeyValueTable: APM metadata sections and the stacktrace local variables panel.metadata_error_apm.mov
References
Closes #275904