fix(ObjectPage): adjust header shadow (#7855)

Fixes #7812

Author: Lukas742

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

@@ -716,11 +716,11 @@ describe('ObjectPage', () => {
 
     cy.mount(<TestComp height="2000px" withFooter mode={ObjectPageMode.Default} />);
     cy.findByText('Update Heights').click();
-    cy.findByText('{"offset":1080,"scroll":2310}').should('exist');
+    cy.findByText('{"offset":1080,"scroll":2320}').should('exist');
 
     cy.findByTestId('op').scrollTo('bottom');
     cy.findByText('Update Heights').click({ force: true });
-    cy.findByText('{"offset":1080,"scroll":2310}').should('exist');
+    cy.findByText('{"offset":1080,"scroll":2320}').should('exist');
 
     cy.mount(<TestComp height="400px" mode={ObjectPageMode.Default} />);
     cy.findByText('Update Heights').click();

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

@@ -108,21 +108,29 @@
 .tabContainer {
   position: sticky;
   z-index: 3;
+  background: var(--sapObjectHeader_Background);
+  padding-block-start: 3px;
+  &::after {
+    content: '';
+    pointer-events: none;
+    position: absolute;
+    height: 1px;
+    inset-block-end: -1px;
+    inset-inline-start: 0;
+    width: 100%;
+    box-shadow: var(--sapContent_HeaderShadow);
+  }
 }
 
 .tabContainerComponent {
-  padding-block-start: 3px;
-  background: var(--sapObjectHeader_Background);
   &::part(content) {
     display: none;
   }
 
   &::part(tabstrip) {
     padding: 0;
     padding-inline: var(--_ui5wcr_ObjectPage_tab_bar_inline_padding);
-    box-shadow:
-      inset 0 -0.0625rem var(--sapPageHeader_BorderColor),
-      0 0.125rem 0.25rem 0 rgb(0 0 0 / 8%);
+    box-shadow: none;
   }
 }
 

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

@@ -720,7 +720,7 @@ const ObjectPage = forwardRef<ObjectPageDomRef, ObjectPagePropTypes>((props, ref
             className={classNames.tabContainer}
             data-component-name="ObjectPageTabContainer"
             style={{
-              top:
+              insetBlockStart:
                 headerPinned || scrolledHeaderExpanded
                   ? `${topHeaderHeight + (headerCollapsed === true ? 0 : headerContentHeight)}px`
                   : `${topHeaderHeight}px`,

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

@@ -1,5 +1,9 @@
 .section {
   box-sizing: border-box;
+
+  &:first-of-type {
+    margin-block-start: 1px;
+  }
 }
 
 .section [data-component-name='ObjectPageSubSection']:not(:first-child) {

packages/main/src/components/ObjectPageTitle/ObjectPageTitle.cy.tsx

@@ -77,7 +77,8 @@ describe('ObjectPageTitle', () => {
       />,
     );
     // no nav actions
-    cy.findByTestId('breadcrumbs').parent().should('have.css', 'width', '1808px' /*100%*/);
+    // The overflow breadcrumbs button requires time until it's mounted -> value can be different initially
+    cy.findByTestId('breadcrumbs').parent().should('have.css', 'width', '1793px' /*100%*/);
     cy.mount(
       <PageComponent
         titleProps={{
@@ -92,10 +93,10 @@ describe('ObjectPageTitle', () => {
       />,
     );
     // nav actions in actions toolbar
-    cy.findByTestId('breadcrumbs').parent().should('have.css', 'width', '1808px' /*100%*/);
+    cy.findByTestId('breadcrumbs').parent().should('have.css', 'width', '1793px' /*100%*/);
     cy.viewport(1000, 1000);
     // w/ nav actions
-    cy.findByTestId('breadcrumbs').parent().should('have.css', 'width', '460px' /*50% (min-width)*/);
+    cy.findByTestId('breadcrumbs').parent().should('have.css', 'width', '452.5px' /*50% (min-width)*/);
   });
 
   it('expandedContent & snappedContent', () => {