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

Fixes #7025

Author: Lukas742

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

@@ -60,6 +60,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'] {

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

@@ -295,17 +295,19 @@ const ObjectPage = forwardRef<HTMLDivElement, 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, isSubSection = false) => {
     const section = objectPageRef.current?.querySelector<HTMLElement>(
@@ -643,7 +645,10 @@ const ObjectPage = forwardRef<HTMLDivElement, ObjectPagePropTypes>((props, ref)
         headerPinned: headerPinned || scrolledHeaderExpanded,
         ref: componentRefHeaderContent,
         children: (
-          <div className={classNames.headerContainer} data-component-name="ObjectPageHeaderContainer">
+          <div
+            className={clsx(classNames.headerContainer, avatar && classNames.hasAvatar)}
+            data-component-name="ObjectPageHeaderContainer"
+          >
             {avatar}
             {(headerContent.props.children || titleInHeader) && (
               <div data-component-name="ObjectPageHeaderContent">