[Serverless] Increase root breadcrumb width to reduce elipsis (#171515)

## Summary close #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">
elastic · Nov 21, 2023 · f4e0d83 · f4e0d83
1 parent f51e6cd
commit f4e0d83
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 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
@@ -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/...me/core-chrome-browser-internal/src/project_navigation/project_navigation_service.test.ts b/...me/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
@@ -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,
+      }}
+    />
+  );
 }