[ObsUX] Fix transaction bar being pushed to the right (#170406)

closes https://github.com/elastic/kibana/issues/146869

## Summary

This PR fixes the timeline bar pushed by the children's count label.

<img width="1074" alt="image"
src="603f62aa-24f0-4cb0-9e0f-97361f0020b7">


It also caps the max width of the label, so that large numbers don't
overlap with the transaction bar.

<img width="960" alt="image"
src="0d0acc50-855a-40b8-bdad-280dea982626">


A tooltip will now always appear when hovering over the count,
regardless of how much space it takes

<img width="1074" alt="image"
src="fc8b31dd-8fb0-4afe-ac6c-c3360a1a2363">


### Checklist

- Start Kibana pointing to an oblt-cli cluster
  - Alternatively, point to a local es cluster and use synthtrace: 
- `node scripts/synthtrace distributed_trace_long.ts
--target=http://elastic:changeme@localhost:9200 --live
--kibana=http://elastic:changeme@0.0.0.0:5601/ftw --clean `
- Navigate to `APM` > `Traces`

---------

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/waterfall/accordion_waterfall.tsx

@@ -12,11 +12,13 @@ import {
   EuiFlexItem,
   EuiIcon,
   EuiText,
+  EuiToolTip,
 } from '@elastic/eui';
 import { euiStyled } from '@kbn/kibana-react-plugin/common';
 import { groupBy } from 'lodash';
 import { transparentize } from 'polished';
 import React, { useState } from 'react';
+import { asBigNumber } from '../../../../../../../common/utils/formatters';
 import { getCriticalPath } from '../../../../../../../common/critical_path/get_critical_path';
 import { useTheme } from '../../../../../../hooks/use_theme';
 import { Margins } from '../../../../../shared/charts/timeline';
@@ -148,7 +150,7 @@ export function AccordionWaterfall(props: AccordionWaterfallProps) {
             <ToggleAccordionButton
               show={hasToggle}
               isOpen={isOpen}
-              childrenAmount={children.length}
+              childrenCount={children.length}
               onClick={toggleAccordion}
             />
           </EuiFlexItem>
@@ -200,12 +202,12 @@ export function AccordionWaterfall(props: AccordionWaterfallProps) {
 function ToggleAccordionButton({
   show,
   isOpen,
-  childrenAmount,
+  childrenCount,
   onClick,
 }: {
   show: boolean;
   isOpen: boolean;
-  childrenAmount: number;
+  childrenCount: number;
   onClick: () => void;
 }) {
   if (!show) {
@@ -213,7 +215,12 @@ function ToggleAccordionButton({
   }
 
   return (
-    <div style={{ height: ACCORDION_HEIGHT, display: 'flex' }}>
+    <div
+      style={{
+        height: ACCORDION_HEIGHT,
+        display: 'flex',
+      }}
+    >
       <EuiFlexGroup gutterSize="xs" alignItems="center" justifyContent="center">
         <EuiFlexItem grow={false}>
           {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}
@@ -226,8 +233,18 @@ function ToggleAccordionButton({
             <EuiIcon type={isOpen ? 'arrowDown' : 'arrowRight'} />
           </div>
         </EuiFlexItem>
-        <EuiFlexItem grow={false}>
-          <EuiText size="xs">{childrenAmount}</EuiText>
+        <EuiFlexItem grow={false} style={{ position: 'relative' }}>
+          <div
+            style={{
+              position: 'absolute',
+              top: '50%',
+              transform: 'translate(0, -50%)',
+            }}
+          >
+            <EuiToolTip content={childrenCount} delay="long">
+              <EuiText size="xs">{asBigNumber(childrenCount)}</EuiText>
+            </EuiToolTip>
+          </div>
         </EuiFlexItem>
       </EuiFlexGroup>
     </div>