diff --git a/packages/main/src/components/ObjectPage/ObjectPage.cy.tsx b/packages/main/src/components/ObjectPage/ObjectPage.cy.tsx index cd4a0737822..539f303c8a5 100644 --- a/packages/main/src/components/ObjectPage/ObjectPage.cy.tsx +++ b/packages/main/src/components/ObjectPage/ObjectPage.cy.tsx @@ -716,11 +716,11 @@ describe('ObjectPage', () => { cy.mount(); 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(); cy.findByText('Update Heights').click(); diff --git a/packages/main/src/components/ObjectPage/ObjectPage.module.css b/packages/main/src/components/ObjectPage/ObjectPage.module.css index 8fdd1a1b671..ae6f2a8ad2f 100644 --- a/packages/main/src/components/ObjectPage/ObjectPage.module.css +++ b/packages/main/src/components/ObjectPage/ObjectPage.module.css @@ -108,11 +108,21 @@ .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; } @@ -120,9 +130,7 @@ &::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; } } diff --git a/packages/main/src/components/ObjectPage/index.tsx b/packages/main/src/components/ObjectPage/index.tsx index 8877eac50fb..b46abd398f1 100644 --- a/packages/main/src/components/ObjectPage/index.tsx +++ b/packages/main/src/components/ObjectPage/index.tsx @@ -720,7 +720,7 @@ const ObjectPage = forwardRef((props, ref className={classNames.tabContainer} data-component-name="ObjectPageTabContainer" style={{ - top: + insetBlockStart: headerPinned || scrolledHeaderExpanded ? `${topHeaderHeight + (headerCollapsed === true ? 0 : headerContentHeight)}px` : `${topHeaderHeight}px`, diff --git a/packages/main/src/components/ObjectPageSection/ObjectPageSection.module.css b/packages/main/src/components/ObjectPageSection/ObjectPageSection.module.css index 66a6350dc08..aba75b68273 100644 --- a/packages/main/src/components/ObjectPageSection/ObjectPageSection.module.css +++ b/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) { diff --git a/packages/main/src/components/ObjectPageTitle/ObjectPageTitle.cy.tsx b/packages/main/src/components/ObjectPageTitle/ObjectPageTitle.cy.tsx index 0ef431cac15..28fd1bcdc89 100644 --- a/packages/main/src/components/ObjectPageTitle/ObjectPageTitle.cy.tsx +++ b/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( { />, ); // 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', () => {