From f4e0d83598a1c128a81c6ce7de10e99f6bc122d9 Mon Sep 17 00:00:00 2001
From: Anton Dosov <anton.dosov@elastic.co>
Date: Tue, 21 Nov 2023 14:39:52 +0100
Subject: [PATCH] [Serverless] Increase root breadcrumb width to reduce elipsis
 (#171515)

## Summary

close https://github.com/elastic/kibana/issues/170758

This PR increases root breadcrumb max width from 160 to 320px to fit
more of project titles. It also slightly adjusts number of visible
breadcrumbs per breakpoint to account for potentially 2x longer root
breadcrumb. Note that responsiveness is still not ideal as the system
doesn't actually calculate the width of each breadcrumb.


Before:

<img width="1267" alt="Screenshot 2023-11-20 at 11 53 13"
src="https://github.com/elastic/kibana/assets/7784120/6d2ba8d2-5bc0-4f85-a87a-a4185ae901f7">


After:

<img width="1284" alt="Screenshot 2023-11-20 at 11 52 31"
src="https://github.com/elastic/kibana/assets/7784120/90a57e58-6836-4465-a21e-78f72dc4953e">
---
 .../src/project_navigation/breadcrumbs.tsx        |  2 ++
 .../project_navigation_service.test.ts            |  9 +++++++++
 .../src/ui/project/breadcrumbs.tsx                | 15 ++++++++++++++-
 3 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/packages/core/chrome/core-chrome-browser-internal/src/project_navigation/breadcrumbs.tsx b/packages/core/chrome/core-chrome-browser-internal/src/project_navigation/breadcrumbs.tsx
index 8bd690fba8a7e..089613939c833 100644
--- a/packages/core/chrome/core-chrome-browser-internal/src/project_navigation/breadcrumbs.tsx
+++ b/packages/core/chrome/core-chrome-browser-internal/src/project_navigation/breadcrumbs.tsx
@@ -100,6 +100,8 @@ function buildRootCrumb({
       i18n.translate('core.ui.primaryNav.cloud.projectLabel', {
         defaultMessage: 'Project',
       }),
+    // increase the max-width of the root breadcrumb to not truncate too soon
+    style: { maxWidth: '320px' },
     popoverContent: (
       <EuiContextMenuPanel
         size="s"
diff --git a/packages/core/chrome/core-chrome-browser-internal/src/project_navigation/project_navigation_service.test.ts b/packages/core/chrome/core-chrome-browser-internal/src/project_navigation/project_navigation_service.test.ts
index e42176bc177e5..fded446938e75 100644
--- a/packages/core/chrome/core-chrome-browser-internal/src/project_navigation/project_navigation_service.test.ts
+++ b/packages/core/chrome/core-chrome-browser-internal/src/project_navigation/project_navigation_service.test.ts
@@ -114,6 +114,9 @@ describe('breadcrumbs', () => {
           "popoverProps": Object {
             "panelPaddingSize": "none",
           },
+          "style": Object {
+            "maxWidth": "320px",
+          },
           "text": "Project",
         },
         Object {
@@ -176,6 +179,9 @@ describe('breadcrumbs', () => {
           "popoverProps": Object {
             "panelPaddingSize": "none",
           },
+          "style": Object {
+            "maxWidth": "320px",
+          },
           "text": "Project",
         },
         Object {
@@ -232,6 +238,9 @@ describe('breadcrumbs', () => {
           "popoverProps": Object {
             "panelPaddingSize": "none",
           },
+          "style": Object {
+            "maxWidth": "320px",
+          },
           "text": "Project",
         },
         Object {
diff --git a/packages/core/chrome/core-chrome-browser-internal/src/ui/project/breadcrumbs.tsx b/packages/core/chrome/core-chrome-browser-internal/src/ui/project/breadcrumbs.tsx
index 4ce22ba727e11..0d453290ba3c4 100644
--- a/packages/core/chrome/core-chrome-browser-internal/src/ui/project/breadcrumbs.tsx
+++ b/packages/core/chrome/core-chrome-browser-internal/src/ui/project/breadcrumbs.tsx
@@ -43,5 +43,18 @@ export function Breadcrumbs({ breadcrumbs$ }: Props) {
     };
   });
 
-  return <EuiBreadcrumbs breadcrumbs={crumbs} max={10} data-test-subj="breadcrumbs" />;
+  return (
+    <EuiBreadcrumbs
+      breadcrumbs={crumbs}
+      data-test-subj="breadcrumbs"
+      // reduce number of visible breadcrumbs due to increased max-width of the root breadcrumbs
+      responsive={{
+        xs: 1,
+        s: 2,
+        m: 3,
+        l: 4,
+        xl: 7,
+      }}
+    />
+  );
 }