From 77bd7ea9cf23941a43623987d977778609bb1d00 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cau=C3=AA=20Marcondes?=
 <55978943+cauemarcondes@users.noreply.github.com>
Date: Mon, 21 Sep 2020 14:11:54 +0100
Subject: [PATCH] [APM] environments overlap w/ sparklines if labels are too
 long (#77993)

---
 .../ServiceOverview.test.tsx.snap             | 29 +++++++------------
 .../shared/EnvironmentBadge/index.tsx         |  2 +-
 2 files changed, 11 insertions(+), 20 deletions(-)

diff --git a/x-pack/plugins/apm/public/components/app/ServiceOverview/__test__/__snapshots__/ServiceOverview.test.tsx.snap b/x-pack/plugins/apm/public/components/app/ServiceOverview/__test__/__snapshots__/ServiceOverview.test.tsx.snap
index dfc0cc8637ff1..40a2b6a5fa81b 100644
--- a/x-pack/plugins/apm/public/components/app/ServiceOverview/__test__/__snapshots__/ServiceOverview.test.tsx.snap
+++ b/x-pack/plugins/apm/public/components/app/ServiceOverview/__test__/__snapshots__/ServiceOverview.test.tsx.snap
@@ -223,30 +223,21 @@ NodeList [
         class="euiTableCellContent euiTableCellContent--overflowingContent"
       >
         <span
-          class="euiBadge euiBadge--hollow euiBadge--iconLeft"
-          title="test"
-        >
-          <span
-            class="euiBadge__content"
-          >
-            <span
-              class="euiBadge__text"
-            >
-              test
-            </span>
-          </span>
-        </span>
-        <span
-          class="euiBadge euiBadge--hollow euiBadge--iconLeft"
-          title="dev"
+          class="euiToolTipAnchor"
         >
           <span
-            class="euiBadge__content"
+            class="euiBadge euiBadge--iconLeft"
+            style="background-color: rgb(211, 218, 230); color: rgb(0, 0, 0);"
+            title="2 environments"
           >
             <span
-              class="euiBadge__text"
+              class="euiBadge__content"
             >
-              dev
+              <span
+                class="euiBadge__text"
+              >
+                2 environments
+              </span>
             </span>
           </span>
         </span>
diff --git a/x-pack/plugins/apm/public/components/shared/EnvironmentBadge/index.tsx b/x-pack/plugins/apm/public/components/shared/EnvironmentBadge/index.tsx
index a430eea1cf40c..fd97f104263df 100644
--- a/x-pack/plugins/apm/public/components/shared/EnvironmentBadge/index.tsx
+++ b/x-pack/plugins/apm/public/components/shared/EnvironmentBadge/index.tsx
@@ -12,7 +12,7 @@ interface Props {
   environments: string[];
 }
 export function EnvironmentBadge({ environments = [] }: Props) {
-  if (environments.length < 3) {
+  if (environments.length < 2) {
     return (
       <>
         {environments.map((env) => (