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,
+      }}
+    />
+  );
 }