From 29e6c978d18a449b67d2b1c7493ca570e760a524 Mon Sep 17 00:00:00 2001
From: Anton Dosov <anton.dosov@elastic.co>
Date: Wed, 11 Nov 2020 13:27:51 +0100
Subject: [PATCH] fix truncation issue

---
 .../public/chrome/ui/header/header_breadcrumbs.tsx  | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/src/core/public/chrome/ui/header/header_breadcrumbs.tsx b/src/core/public/chrome/ui/header/header_breadcrumbs.tsx
index d52faa87cfecd..ee3311a94a202 100644
--- a/src/core/public/chrome/ui/header/header_breadcrumbs.tsx
+++ b/src/core/public/chrome/ui/header/header_breadcrumbs.tsx
@@ -17,7 +17,7 @@
  * under the License.
  */
 
-import { EuiHeaderBreadcrumbs } from '@elastic/eui';
+import { EuiFlexGroup, EuiHeaderBreadcrumbs } from '@elastic/eui';
 import classNames from 'classnames';
 import React from 'react';
 import useObservable from 'react-use/lib/useObservable';
@@ -51,15 +51,14 @@ export function HeaderBreadcrumbs({ appTitle$, breadcrumbs$, breadcrumbsAppendEx
     ),
   }));
 
-  if (breadcrumbsAppendExtension) {
+  if (breadcrumbsAppendExtension && crumbs[crumbs.length - 1]) {
     const lastCrumb = crumbs[crumbs.length - 1];
     lastCrumb.text = (
-      <>
-        {lastCrumb.text}
-        <HeaderExtension extension={breadcrumbsAppendExtension.content} display={'inlineBlock'} />
-      </>
+      <EuiFlexGroup responsive={false} gutterSize={'none'} alignItems={'baseline'}>
+        <div className="eui-textTruncate">{lastCrumb.text}</div>
+        <HeaderExtension extension={breadcrumbsAppendExtension.content} />
+      </EuiFlexGroup>
     );
   }
-
   return <EuiHeaderBreadcrumbs breadcrumbs={crumbs} max={10} data-test-subj="breadcrumbs" />;
 }