fix(ObjectPageTitle): fix alignment of actions & content (#7803)

Author: Lukas742

packages/main/src/components/ObjectPage/ObjectPage.stories.tsx

@@ -40,6 +40,7 @@ import {
   Toolbar,
   ToolbarButton,
 } from '../../index.js';
+import { Tag } from '../../webComponents/Tag/index.js';
 import { ObjectPage } from './index.js';
 
 const meta = {
@@ -78,13 +79,13 @@ const meta = {
         subHeader="Senior UI Developer"
         snappedSubHeader={'Senior UI Developer (snapped header)'}
         actionsBar={
-          <Toolbar design="Transparent">
+          <Toolbar design="Transparent" style={{ height: 'auto' }}>
             <ToolbarButton design={ButtonDesign.Emphasized} text="Primary Action" />
             <ToolbarButton design={ButtonDesign.Transparent} text="Action" />
           </Toolbar>
         }
         navigationBar={
-          <Toolbar design="Transparent">
+          <Toolbar design="Transparent" style={{ height: 'auto' }}>
             <ToolbarButton
               icon={shareIcon}
               design={ButtonDesign.Transparent}
@@ -117,7 +118,9 @@ const meta = {
           </MessageStrip>
         }
       >
-        <ObjectStatus state={ValueState.Positive}>employed</ObjectStatus>
+        <Tag design="Positive" style={{ alignSelf: 'center' }}>
+          employed
+        </Tag>
       </ObjectPageTitle>
     ),
     headerArea: (

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

@@ -38,7 +38,6 @@
 .titleMainSection {
   overflow-x: hidden;
   flex: 1 1 auto;
-  align-items: baseline;
 }
 
 .middleSection {
@@ -57,6 +56,7 @@
   padding-block-start: 0.3125rem;
   overflow-wrap: break-word;
   hyphens: auto;
+  align-self: start;
 
   > * {
     font-family: inherit;
@@ -69,9 +69,16 @@
 
 .snappedAvatarContainer:has([data-component-name='ObjectPageCollapsedAvatar']) {
   flex-shrink: 0;
+  align-self: center;
 }
 
-@container (min-width: 600px) and (max-width: 1023px) {
+@container (min-width: 1024px) {
+  .title {
+    padding-block-start: 0.3125rem;
+  }
+}
+
+@container (min-width: 600px) and (max-width: 1023.99px) {
   .title {
     padding-block-start: 0.6875rem;
   }
@@ -111,10 +118,10 @@
 .toolbar {
   flex-grow: 1;
   flex-shrink: 1.6;
-  min-width: 3rem;
   display: flex;
   align-items: center;
   justify-content: flex-end;
+  align-self: flex-start;
 
   > [ui5-toolbar] {
     padding: 0;