From 7efd96de1dbee74454f61084ed4e594c63a546cb Mon Sep 17 00:00:00 2001
From: Lukas Harbarth <lukas.harbarth@sap.com>
Date: Thu, 6 Mar 2025 10:41:29 +0100
Subject: [PATCH] fix(ObjectPage): use full width for header content if no
 `image` is set

---
 .../src/components/ObjectPage/ObjectPage.module.css   |  4 +++-
 packages/main/src/components/ObjectPage/index.tsx     | 11 ++++++++---
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/packages/main/src/components/ObjectPage/ObjectPage.module.css b/packages/main/src/components/ObjectPage/ObjectPage.module.css
index 64cd7c55e57..98f142c6ff8 100644
--- a/packages/main/src/components/ObjectPage/ObjectPage.module.css
+++ b/packages/main/src/components/ObjectPage/ObjectPage.module.css
@@ -66,6 +66,8 @@
   margin-block-end: 0.25rem;
   background-color: var(--sapObjectHeader_Background);
   display: grid;
+}
+.hasAvatar {
   grid-auto-columns: min-content calc(100% - 5rem - 2rem);
 
   [data-component-name='ObjectPageHeaderContent'] {
@@ -188,4 +190,4 @@
 .clickArea {
   position: absolute;
   inset: 0;
-}
\ No newline at end of file
+}
diff --git a/packages/main/src/components/ObjectPage/index.tsx b/packages/main/src/components/ObjectPage/index.tsx
index b1905ffbd5d..50ebda46cb9 100644
--- a/packages/main/src/components/ObjectPage/index.tsx
+++ b/packages/main/src/components/ObjectPage/index.tsx
@@ -314,6 +314,7 @@ const ObjectPage = forwardRef<ObjectPageDomRef, ObjectPagePropTypes>((props, ref
         <span
           className={classNames.headerImage}
           style={{ borderRadius: imageShapeCircle ? '50%' : 0, overflow: 'hidden' }}
+          data-component-name="ObjectPageHeaderImage"
         >
           <img src={image} className={classNames.image} alt="Company Logo" />
         </span>
@@ -321,10 +322,11 @@ const ObjectPage = forwardRef<ObjectPageDomRef, ObjectPagePropTypes>((props, ref
     } else {
       return cloneElement(image, {
         size: AvatarSize.L,
-        className: clsx(classNames.headerImage, image.props?.className)
+        className: clsx(classNames.headerImage, image.props?.className),
+        'data-component-name': 'ObjectPageHeaderImage'
       } as AvatarPropTypes);
     }
-  }, [image, classNames.headerImage, classNames.image, imageShapeCircle]);
+  }, [image, imageShapeCircle]);
 
   const scrollToSectionById = (id: string | undefined, isSubSection = false) => {
     const section = getSectionElementById(objectPageRef.current, isSubSection, id);
@@ -639,7 +641,10 @@ const ObjectPage = forwardRef<ObjectPageDomRef, ObjectPagePropTypes>((props, ref
         //@ts-expect-error: todo remove me when forwardref has been replaced
         ref: componentRefHeaderContent,
         children: (
-          <div className={classNames.headerContainer} data-component-name="ObjectPageHeaderContainer">
+          <div
+            className={clsx(classNames.headerContainer, avatar && classNames.hasAvatar)}
+            data-component-name="ObjectPageHeaderContainer"
+          >
             {avatar}
             {headerArea.props.children && (
               <div data-component-name="ObjectPageHeaderContent">{headerArea.props.children}</div>