[APM] Fix occurrences cut off value to be fully visible

[jennypavlova]

Closes 174021

Summary

This PR fixes the occurrences column cut-off value and makes it fully visible.
My first idea was to try to make a custom styling for the specific Occurrences column but after that, I found that inside the SparkPlot component I could make the label visible for all the similar cases where we show label and chart in a table by removing the grow={false} and whiteSpace: 'nowrap' style.

Before	After

With the change, it is also visible if the window is resized ( both smaller and bigger):

apm_error_table_resize.mov

Testing

1. Use synthtrace to generate data
   1. One way is to change the failedTimestamps inside the simple_trace to something bigger (add several 0s but not toooo big as it may result in an error)
   2. If you don't want to do that the value can be adjusted in the browser like in the resizing example video and simple_trace can remain the same
   3. After that run node scripts/synthtrace simple_trace.ts
2. Open a service and check the Overview and Errors tabs (as well as the other table values using label and chart)

[apmmachine]

🤖 GitHub comments

Expand to view the GitHub comments

Just comment with:

• /oblt-deploy : Deploy a Kibana instance using the Observability test environments.
• /oblt-deploy-serverless : Deploy a serverless Kibana instance using the Observability test environments.
• run elasticsearch-ci/docs : Re-trigger the docs validation. (use unformatted text in the comment!)

[jennypavlova]

/ci

[elasticmachine]

Pinging @elastic/obs-ux-infra_services-team (Team:obs-ux-infra_services)

[kibana-ci]

💚 Build Succeeded

• Buildkite Build
• Commit: ce23231

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
apm	3.1MB	3.1MB	-33.0B

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

cc @jennypavlova

[crespocarlos]

LGTM!

[crespocarlos]

Another option could be shortening big numbers like 1000 > 1k, 1000000 > 1m, and etc

[jennypavlova]

Nice idea, my concern is that we are losing precision and for such cases, I think it might be important to know the exact number - also this will work for different labels not only numbers.

[kpatticha]

Thanks for improving this one @jennypavlova . We recently had a new SDH about this so I'm sure the user will be happy with the fix :D

However, I've noticed that the fix is not applied on the error details page.

it would be great if we could improve this page as well.

[jennypavlova]

However, I've noticed that the fix is not applied on the error details page.

Hey @kpatticha, thanks for the comment. I missed it, sorry for the delay. I am not able to reproduce this also on a smaller screen size (locally using the latest main):

Are there any specific services I should check in order to see it? Can you please check if you can reproduce it again on the latest main and I can add an issue to fix this.