fix(DynamicPageTitle): spread breadcrumbs if only child (#5001)

Fixes #5000

Author: Lukas742

packages/main/src/components/DynamicPageTitle/DynamicPageTitle.cy.tsx

@@ -1,6 +1,6 @@
 import { useRef, useState } from 'react';
 import type { DynamicPageTitlePropTypes } from '../..';
-import { DynamicPage, ObjectPage, Title } from '../..';
+import { Breadcrumbs, BreadcrumbsItem, DynamicPage, ObjectPage, Title } from '../..';
 import { Button } from '../../webComponents/index.js';
 import { DynamicPageTitle } from './';
 
@@ -102,4 +102,46 @@ describe('DynamicPageTitle', () => {
       cy.get('[data-component-name="ToolbarOverflowButton"]').should('be.visible');
     });
   });
+
+  it('breadcrumbs spread', () => {
+    [true, false].forEach((isObjectPage) => {
+      cy.viewport(1920, 1080);
+      cy.mount(
+        <PageComponent
+          isObjectPage={isObjectPage}
+          dynamicPageTitleProps={{
+            navigationActions: undefined,
+            breadcrumbs: (
+              <Breadcrumbs data-testid="breadcrumbs">
+                {new Array(14).fill(1337).map((item, index) => (
+                  <BreadcrumbsItem key={index}>{`BreadcrumbsItem ${index}`}</BreadcrumbsItem>
+                ))}
+              </Breadcrumbs>
+            )
+          }}
+        />
+      );
+      // no nav actions
+      cy.findByTestId('breadcrumbs').parent().should('have.css', 'width', '1808px' /*100%*/);
+      cy.mount(
+        <PageComponent
+          isObjectPage={isObjectPage}
+          dynamicPageTitleProps={{
+            breadcrumbs: (
+              <Breadcrumbs data-testid="breadcrumbs">
+                {new Array(14).fill(1337).map((item, index) => (
+                  <BreadcrumbsItem key={index}>{`BreadcrumbsItem ${index}`}</BreadcrumbsItem>
+                ))}
+              </Breadcrumbs>
+            )
+          }}
+        />
+      );
+      // nav actions in actions toolbar
+      cy.findByTestId('breadcrumbs').parent().should('have.css', 'width', '1808px' /*100%*/);
+      cy.viewport(1000, 1000);
+      // w/ nav actions
+      cy.findByTestId('breadcrumbs').parent().should('have.css', 'width', '460px' /*50% (min-width)*/);
+    });
+  });
 });

packages/main/src/components/DynamicPageTitle/DynamicPageTitle.jss.ts

@@ -30,7 +30,10 @@ export const DynamicPageTitleStyles = {
   },
   breadcrumbs: {
     minWidth: '50%',
-    padding: '0.5rem 0 0.25rem 0'
+    padding: '0.5rem 0 0.25rem 0',
+    '&:only-child': {
+      width: '100%'
+    }
   },
   titleMainSection: {
     overflowX: 'hidden',

packages/main/src/components/DynamicPageTitle/index.tsx

@@ -223,7 +223,7 @@ const DynamicPageTitle = forwardRef<HTMLDivElement, DynamicPageTitlePropTypes>((
               {breadcrumbs}
             </div>
           )}
-          {showNavigationInTopArea && (
+          {navigationActions && showNavigationInTopArea && (
             <Toolbar
               tabIndex={undefined}
               role={undefined}