fix(ObjectPageTitle): prevent styling race condition when using static css bundle (#6115)

Author: MarcusNotheis

.husky/pre-commit

@@ -1 +1 @@
-lint-staged
+yarn run lint-staged

packages/main/src/components/ObjectPageTitle/ObjectPageTitle.module.css

@@ -4,9 +4,6 @@
   min-height: 3rem;
   padding-block-start: 0.5rem;
   padding-block-end: 0.5rem;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
   position: sticky;
   inset-block-start: 0;
   z-index: 2;

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

@@ -4,7 +4,7 @@ import { debounce, Device, useStylesheet, useSyncRef } from '@ui5/webcomponents-
 import { clsx } from 'clsx';
 import type { ReactElement, ReactNode } from 'react';
 import { cloneElement, forwardRef, isValidElement, useEffect, useRef, useState } from 'react';
-import { FlexBoxAlignItems, FlexBoxJustifyContent } from '../../enums/index.js';
+import { FlexBoxAlignItems, FlexBoxDirection, FlexBoxJustifyContent } from '../../enums/index.js';
 import { stopPropagation } from '../../internal/stopPropagation.js';
 import type { CommonProps } from '../../types/index.js';
 import type { ToolbarDomRef } from '../../webComponents/index.js';
@@ -198,7 +198,14 @@ const ObjectPageTitle = forwardRef<HTMLDivElement, ObjectPageTitlePropTypes>((pr
   }, []);
 
   return (
-    <FlexBox className={containerClasses} ref={componentRef} data-component-name="ObjectPageTitle" {...rest}>
+    <FlexBox
+      className={containerClasses}
+      ref={componentRef}
+      data-component-name="ObjectPageTitle"
+      direction={FlexBoxDirection.Column}
+      justifyContent={FlexBoxJustifyContent.SpaceBetween}
+      {...rest}
+    >
       <span
         className={classNames.clickArea}
         onClick={onHeaderClick}