fix(ObjectPage): position expand/collapse buttons correctly (#6897)

Lukas742 · web-flow · commit 70745c6cbf60 · 2025-02-04T12:02:20.000+01:00
Fixes #6867
diff --git a/packages/main/src/components/ObjectPage/ObjectPage.module.css b/packages/main/src/components/ObjectPage/ObjectPage.module.css
@@ -52,6 +52,11 @@
   }
 }
 
+/*:has cannot be nested*/
+.header:has([data-component-name='ATwithImageSnappedContentContainer']) [data-component-name='ObjectPageTitle'] {
+  padding-block-end: 0;
+}
+
 .headerCollapsed {
   --_ui5wcr_ObjectPage_header_display: none;
   --_ui5wcr_ObjectPage_title_fontsize: var(--sapObjectHeader_Title_SnappedFontSize);
@@ -177,6 +182,7 @@
 
 .snappedContent {
   grid-column: 1 / span 2;
+  padding-block-end: 0.5rem;
 }
 
 .clickArea {
diff --git a/packages/main/src/components/ObjectPage/index.tsx b/packages/main/src/components/ObjectPage/index.tsx
@@ -794,7 +794,7 @@ const ObjectPage = forwardRef<ObjectPageDomRef, ObjectPagePropTypes>((props, ref
             top:
               scrolledHeaderExpanded || headerPinned
                 ? `${topHeaderHeight + (headerCollapsed === true ? 0 : headerContentHeight)}px`
-                : `${topHeaderHeight + 5}px`
+                : `${topHeaderHeight}px`
           }}
         >
           <ObjectPageAnchorBar

Original file line number	Diff line number	Diff line change
`@@ -52,6 +52,11 @@`
`52`	`52`	`}`
`53`	`53`	`}`
`54`	`54`
	`55`	`+/:has cannot be nested/`
	`56`	`+.header:has([data-component-name='ATwithImageSnappedContentContainer']) [data-component-name='ObjectPageTitle'] {`
	`57`	`+ padding-block-end: 0;`
	`58`	`+}`
	`59`	`+`
`55`	`60`	`.headerCollapsed {`
`56`	`61`	`--_ui5wcr_ObjectPage_header_display: none;`
`57`	`62`	`--_ui5wcr_ObjectPage_title_fontsize: var(--sapObjectHeader_Title_SnappedFontSize);`
`@@ -177,6 +182,7 @@`
`177`	`182`
`178`	`183`	`.snappedContent {`
`179`	`184`	`grid-column: 1 / span 2;`
	`185`	`+ padding-block-end: 0.5rem;`
`180`	`186`	`}`
`181`	`187`
`182`	`188`	`.clickArea {`
Original file line number	Diff line number	Diff line change
`@@ -794,7 +794,7 @@ const ObjectPage = forwardRef<ObjectPageDomRef, ObjectPagePropTypes>((props, ref`
`794`	`794`	`top:`
`795`	`795`	`scrolledHeaderExpanded \|\| headerPinned`
`796`	`796`	? `${topHeaderHeight + (headerCollapsed === true ? 0 : headerContentHeight)}px`
`797`		- : `${topHeaderHeight + 5}px`
	`797`	+ : `${topHeaderHeight}px`
`798`	`798`	`}}`
`799`	`799`	`>`
`800`	`800`	`<ObjectPageAnchorBar`