fix(ObjectPage): use full width for header content if no image is set

Author: Lukas742

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;
-}
+}

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

@@ -314,17 +314,19 @@ 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>
       );
     } 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>