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((props, ref Company Logo @@ -321,10 +322,11 @@ const ObjectPage = forwardRef((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((props, ref //@ts-expect-error: todo remove me when forwardref has been replaced ref: componentRefHeaderContent, children: ( -
+
{avatar} {headerArea.props.children && (
{headerArea.props.children}