fix(ObjectPage): use UI5WC tabbar shadow (#7975)

The test was updated as previously the width reserved place for the
scrollbar, as the `::after` pseudo element was absolutely positioned,
had explicit width (`100%`) and was rendered in a container with
`overflow: auto`.

Author: Lukas742

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

@@ -105,21 +105,15 @@
   z-index: 4;
 }
 
+.tabContainerSpacer {
+  height: 3px;
+  background: var(--sapObjectHeader_Background);
+}
+
 .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 {
@@ -130,7 +124,6 @@
   &::part(tabstrip) {
     padding: 0;
     padding-inline: var(--_ui5wcr_ObjectPage_tab_bar_inline_padding);
-    box-shadow: none;
   }
 }
 

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

@@ -726,6 +726,8 @@ const ObjectPage = forwardRef<ObjectPageDomRef, ObjectPagePropTypes>((props, ref
                   : `${topHeaderHeight}px`,
             }}
           >
+            {/* Spacer required to prevent overlapping of tabbar btns and expand/pin btns*/}
+            <div aria-hidden="true" className={classNames.tabContainerSpacer} />
             <TabContainer
               collapsed
               onTabSelect={handleTabSelect}

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

@@ -78,7 +78,7 @@ describe('ObjectPageTitle', () => {
     );
     // no nav actions
     // 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.findByTestId('breadcrumbs').parent().should('have.css', 'width', '1808px' /*100%*/);
     cy.mount(
       <PageComponent
         titleProps={{
@@ -93,10 +93,10 @@ describe('ObjectPageTitle', () => {
       />,
     );
     // nav actions in actions toolbar
-    cy.findByTestId('breadcrumbs').parent().should('have.css', 'width', '1793px' /*100%*/);
+    cy.findByTestId('breadcrumbs').parent().should('have.css', 'width', '1808px' /*100%*/);
     cy.viewport(1000, 1000);
     // w/ nav actions
-    cy.findByTestId('breadcrumbs').parent().should('have.css', 'width', '452.5px' /*50% (min-width)*/);
+    cy.findByTestId('breadcrumbs').parent().should('have.css', 'width', '460px' /*50% (min-width)*/);
   });
 
   it('expandedContent & snappedContent', () => {