[APM] DT design polish II

[formgeist]

Splitting up the mega issue and porting over more polish tasks from the original issue which isn't addressed in #24556

---

Remove beta labels

Machine Learning

We have beta labels in the Machine Learning integration flyout and integration popover we need to remove as the ML integration goes GA in 6.5

• Remove (beta) from popover link
• Remove beta label from Flyout content

Search bar

The search bar will become GA in 6.5, so this is a reminder issue to remove the beta label for 6.5.

• Remove beta label from search bar

---

Timeline visual regression

There used to be a minimum width for transactions/spans, so they were visible. Also, the text would flow left when there was no more space on the right.

Before:

After:

Previous implementation: https://github.com/sqren/kibana/blob/a353979ebbca723bde1f07e0bfe2acf9241ad3e0/x-pack/plugins/apm/public/components/app/TransactionDetails/Transaction/Spans/Span.js#L30-L45

Codepen demonstrating the solution: https://codepen.io/sqren/pen/JrXNjY

• Revert right-to-left regression

Note: if easy, add a minimum width to the span items as well, which will close #18680

• Add min width to span (maybe, if easy)

---

Sample tabs navigation

It looks like the tabs navigation is not showing active state on Timeline when entering a Transaction detail page nor selecting a new sample from the distribution. Additionally, there's no border-bottom on the active item once it's active, since it's hidden by the grey horizontal divider between the sample header and the tab content.

• Fix tab navigation and active state

---

Marks vertical lines

Looks like the dot is not longer resting on the x-axis horizontal line but sinks a little deeper. Probably means moving the x-axis labels a little further up from the x-axis line so there's space for the mark dots to appear underneath.

The mark on the right is a fixed mark

• Resolve mark inconsistency and spacing (move x-axis label up 5 px to make room for the dots to slide along the bottom of the axis)

[elasticmachine]

Pinging @elastic/apm-ui

[formgeist]

@jasonrhodes Can you confirm that the stick properties was fixed on the Error group detail page?

[formgeist]

Added a minor polish fix to Context tables by adding some more line-height to the cells.

[makwarth]

Add Traces route change to the description

[formgeist]

@makwarth We have an issue which is moved to 6.6 #23824 - we can obviously discuss if it's important enough to implement now over something else, but it feels like new functionality.

[makwarth]

@formgeist Ah, hadn't seen that one. 6.6 sounds fine with me. I'll remove it again from this issue.

[jasonrhodes]

Current histogram state has been moved to #24740

[jasonrhodes]

• Fix service legend
• Add Services label in front of services legend
• Include services legend in the locked element when scrolling a large timeline

These 3 ^^ moved to #24741

[formgeist]

Added PR fix for the line-height issue in the PropertiesTable #24768

[jasonrhodes]

Confirming that the error group sticky properties margin has been fixed outside this ticket. I removed that and the line-height issue as I think it's clearer to only use the green checkmark to denote things that are done in this ticket.

[jasonrhodes]

Also: I just added in the visual regression here too, to cut down on PR churn. That replaces #24817

[jasonrhodes]

Moved the beta label removals in here too as they are incredibly simple, no need to have separate tickets and CI builds for each. :)

[formgeist]

@jasonrhodes Sounds good 👍