fix(DynamicPageTitle): always show all contents of the 2nd line (#4489)

Fixes #4488

Author: Lukas742

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

@@ -1,5 +1,5 @@
 import { useRef, useState } from 'react';
-import { DynamicPage, DynamicPageTitlePropTypes, ObjectPage } from '../..';
+import { DynamicPage, DynamicPageTitlePropTypes, ObjectPage, Title } from '../..';
 import { Button } from '../../webComponents';
 import { DynamicPageTitle } from './';
 
@@ -81,4 +81,22 @@ describe('DynamicPageTitle', () => {
     cy.wait(200);
     testOverflowRefs({ nav: 'false', actions: 'false' });
   });
+  it('show 2nd line content', () => {
+    cy.viewport(320, 700);
+    [true, false].forEach((isObjectPage) => {
+      cy.mount(
+        <PageComponent
+          isObjectPage={isObjectPage}
+          dynamicPageTitleProps={{
+            header: <Title>This is a pretty long title of the DynamicPageTitle</Title>,
+            navigationActions: undefined,
+            children: <div>Content</div>
+          }}
+        />
+      );
+      cy.findByText('This is a pretty long title of the DynamicPageTitle').should('be.visible');
+      cy.findByText('Content').should('be.visible');
+      cy.get('[data-component-name="ToolbarOverflowButton"]').should('be.visible');
+    });
+  });
 });

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

@@ -33,10 +33,14 @@ export const DynamicPageTitleStyles = {
     padding: '0.5rem 0 0.25rem 0'
   },
   titleMainSection: {
+    overflowX: 'hidden',
     flex: '1 1 100%',
     alignItems: 'baseline'
   },
+  middleSection: { flexGrow: 1, width: '100%', overflowX: 'hidden' },
   title: {
+    minWidth: '3rem',
+    overflowX: 'hidden',
     fontFamily: ThemingParameters.sapObjectHeader_Title_FontFamily,
     color: ThemingParameters.sapObjectHeader_Title_TextColor,
     fontSize: `var(${DynamicPageCssVariables.titleFontSize})`,

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

@@ -245,7 +245,11 @@ const DynamicPageTitle = forwardRef<HTMLDivElement, DynamicPageTitlePropTypes>((
           )}
         </FlexBox>
       )}
-      <FlexBox alignItems={FlexBoxAlignItems.Center} style={{ flexGrow: 1, width: '100%' }}>
+      <FlexBox
+        alignItems={FlexBoxAlignItems.Center}
+        className={classes.middleSection}
+        data-component-name="DynamicPageTitleMiddleSection"
+      >
         <FlexBox className={classes.titleMainSection}>
           {header && (
             <div className={classes.title} data-component-name="DynamicPageTitleHeader">