[9.2] fix(apm): prevent trace sample title from wrapping vertically (#254536) (#254578)

# Backport

This will backport the following commits from `main` to `9.2`:
- [fix(apm): prevent trace sample title from wrapping vertically
(#254536)](#254536)

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

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

<!--BACKPORT [{"author":{"name":"Nathan L
Smith","email":"nathan.smith@elastic.co"},"sourceCommit":{"committedDate":"2026-02-23T18:49:39Z","message":"fix(apm):
prevent trace sample title from wrapping vertically (#254536)\n\n##
Summary\n\nThe \"Trace sample\" heading in the APM transaction details
view wraps\ncharacter-by-character at narrow viewports. The
`EuiFlexItem` wrapping\nthe title has `grow={false}` but still defaults
to `flex-shrink: 1`, so\nwhen the action buttons on the right consume
most of the row width, CSS\ncrushes the title below its intrinsic text
width.\n\nFix: add `flexShrink: 0` to the title's flex item so it never
shrinks\nbelow its content size.\n\n\n| Before | After |\n| :----------:
| :----------: |\n| <img width=\"958\" height=\"722\" alt=\"CleanShot
2026-02-23 at 10
14\n16@2x\"\nsrc=\"https://github.com/user-attachments/assets/56d7303e-22c4-4c41-9e3c-a4e9b3ac86e2\"\n/>
| <img width=\"992\" height=\"656\" alt=\"CleanShot 2026-02-23 at 10
12\n22@2x\"\nsrc=\"https://github.com/user-attachments/assets/02e3b3af-fa89-4757-937a-e00bef034ab1\"\n/>
|\n\n## Test plan\n\n- Manually verified in Kibana APM transactions view
at narrow browser\nwidths — \"Trace sample\" stays on one
line\n\n---------\n\nCo-authored-by: Cursor
<cursoragent@cursor.com>","sha":"bd5153b71f0d4ecfdf0d73409a27dc3e366c4763","branchLabelMapping":{"^v9.4.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:fix","backport:all-open","v9.4.0","Team:obs-presentation"],"title":"fix(apm):
prevent trace sample title from wrapping
vertically","number":254536,"url":"https://github.com/elastic/kibana/pull/254536","mergeCommit":{"message":"fix(apm):
prevent trace sample title from wrapping vertically (#254536)\n\n##
Summary\n\nThe \"Trace sample\" heading in the APM transaction details
view wraps\ncharacter-by-character at narrow viewports. The
`EuiFlexItem` wrapping\nthe title has `grow={false}` but still defaults
to `flex-shrink: 1`, so\nwhen the action buttons on the right consume
most of the row width, CSS\ncrushes the title below its intrinsic text
width.\n\nFix: add `flexShrink: 0` to the title's flex item so it never
shrinks\nbelow its content size.\n\n\n| Before | After |\n| :----------:
| :----------: |\n| <img width=\"958\" height=\"722\" alt=\"CleanShot
2026-02-23 at 10
14\n16@2x\"\nsrc=\"https://github.com/user-attachments/assets/56d7303e-22c4-4c41-9e3c-a4e9b3ac86e2\"\n/>
| <img width=\"992\" height=\"656\" alt=\"CleanShot 2026-02-23 at 10
12\n22@2x\"\nsrc=\"https://github.com/user-attachments/assets/02e3b3af-fa89-4757-937a-e00bef034ab1\"\n/>
|\n\n## Test plan\n\n- Manually verified in Kibana APM transactions view
at narrow browser\nwidths — \"Trace sample\" stays on one
line\n\n---------\n\nCo-authored-by: Cursor
<cursoragent@cursor.com>","sha":"bd5153b71f0d4ecfdf0d73409a27dc3e366c4763"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v9.4.0","branchLabelMappingKey":"^v9.4.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/254536","number":254536,"mergeCommit":{"message":"fix(apm):
prevent trace sample title from wrapping vertically (#254536)\n\n##
Summary\n\nThe \"Trace sample\" heading in the APM transaction details
view wraps\ncharacter-by-character at narrow viewports. The
`EuiFlexItem` wrapping\nthe title has `grow={false}` but still defaults
to `flex-shrink: 1`, so\nwhen the action buttons on the right consume
most of the row width, CSS\ncrushes the title below its intrinsic text
width.\n\nFix: add `flexShrink: 0` to the title's flex item so it never
shrinks\nbelow its content size.\n\n\n| Before | After |\n| :----------:
| :----------: |\n| <img width=\"958\" height=\"722\" alt=\"CleanShot
2026-02-23 at 10
14\n16@2x\"\nsrc=\"https://github.com/user-attachments/assets/56d7303e-22c4-4c41-9e3c-a4e9b3ac86e2\"\n/>
| <img width=\"992\" height=\"656\" alt=\"CleanShot 2026-02-23 at 10
12\n22@2x\"\nsrc=\"https://github.com/user-attachments/assets/02e3b3af-fa89-4757-937a-e00bef034ab1\"\n/>
|\n\n## Test plan\n\n- Manually verified in Kibana APM transactions view
at narrow browser\nwidths — \"Trace sample\" stays on one
line\n\n---------\n\nCo-authored-by: Cursor
<cursoragent@cursor.com>","sha":"bd5153b71f0d4ecfdf0d73409a27dc3e366c4763"}}]}]
BACKPORT-->

Co-authored-by: Nathan L Smith <nathan.smith@elastic.co>
Co-authored-by: Cursor <cursoragent@cursor.com>

Author: 3 people

x-pack/solutions/observability/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/index.tsx

@@ -117,7 +117,8 @@ export function WaterfallWithSummary<TSample extends {}>({
     <EuiFlexGroup direction="column" gutterSize="s">
       <EuiFlexItem grow={false}>
         <EuiFlexGroup alignItems="center">
-          <EuiFlexItem grow={false}>
+          {/* Prevent wrapping on narrow screens */}
+          <EuiFlexItem grow={false} css={{ flexShrink: 0 }}>
             <EuiTitle size="xs">
               <h5>
                 {i18n.translate('xpack.apm.transactionDetails.traceSampleTitle', {