[APM] Fix obscured service map connections (#67129) (#67155)

* Closes #67126 by increasing spacingFactor in the cytoscape layout from 0.85 -> 1.2

* - prevents labels from hiding when nodes get a bit smaller
- also bump the label font size

x-pack/plugins/apm/public/components/app/ServiceMap/Cytoscape.tsx

@@ -80,7 +80,7 @@ function getLayoutOptions(
     roots: selectedRoots.length ? selectedRoots : undefined,
     fit: true,
     padding: nodeHeight,
-    spacingFactor: 0.85,
+    spacingFactor: 1.2,
     // @ts-ignore
     // Rotate nodes counter-clockwise to transform layout from top→bottom to left→right.
     // The extra 5° achieves the effect of separating overlapping taxi-styled edges.

x-pack/plugins/apm/public/components/app/ServiceMap/cytoscapeOptions.ts

@@ -117,7 +117,7 @@ const style: cytoscape.Stylesheet[] = [
       // theme.euiFontFamily doesn't work here for some reason, so we're just
       // specifying a subset of the fonts for the label text.
       'font-family': 'Inter UI, Segoe UI, Helvetica, Arial, sans-serif',
-      'font-size': theme.euiFontSizeXS,
+      'font-size': theme.euiFontSizeS,
       ghost: 'yes',
       'ghost-offset-x': 0,
       'ghost-offset-y': 2,
@@ -127,7 +127,7 @@ const style: cytoscape.Stylesheet[] = [
         isService(el)
           ? el.data(SERVICE_NAME)
           : el.data(SPAN_DESTINATION_SERVICE_RESOURCE),
-      'min-zoomed-font-size': parseInt(theme.euiSizeL, 10),
+      'min-zoomed-font-size': parseInt(theme.euiSizeS, 10),
       'overlay-opacity': 0,
       shape: (el: cytoscape.NodeSingular) =>
         isService(el) ? (isIE11 ? 'rectangle' : 'ellipse') : 'diamond',