From 4649c57123a95c30d4f3f61fb0a3f0ece975d467 Mon Sep 17 00:00:00 2001 From: Lukas Harbarth Date: Wed, 22 Oct 2025 11:19:59 +0200 Subject: [PATCH 1/4] fix(ObjectPage): adjust header shadow --- .../ObjectPage/ObjectPage.module.css | 18 +++++++++++++----- .../main/src/components/ObjectPage/index.tsx | 2 +- 2 files changed, 14 insertions(+), 6 deletions(-) diff --git a/packages/main/src/components/ObjectPage/ObjectPage.module.css b/packages/main/src/components/ObjectPage/ObjectPage.module.css index 8fdd1a1b671..81b1d248085 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; + bottom: -1px; + left: 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`, From 0a17a31e8f79c9ddffe331538589d6f5dde17f9b Mon Sep 17 00:00:00 2001 From: Lukas Harbarth Date: Wed, 22 Oct 2025 11:31:31 +0200 Subject: [PATCH 2/4] account for focus outline --- .../components/ObjectPageSection/ObjectPageSection.module.css | 4 ++++ 1 file changed, 4 insertions(+) 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) { From ea849f75f83a61921b90d552ffcfbbdc33202b76 Mon Sep 17 00:00:00 2001 From: Lukas Harbarth Date: Wed, 22 Oct 2025 13:54:21 +0200 Subject: [PATCH 3/4] fix test --- packages/main/src/components/ObjectPage/ObjectPage.cy.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) 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(); From 13eddf958343393b21611f46156413211c8a95df Mon Sep 17 00:00:00 2001 From: Lukas Harbarth Date: Wed, 22 Oct 2025 16:04:09 +0200 Subject: [PATCH 4/4] fix test --- .../main/src/components/ObjectPage/ObjectPage.module.css | 4 ++-- .../src/components/ObjectPageTitle/ObjectPageTitle.cy.tsx | 7 ++++--- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/packages/main/src/components/ObjectPage/ObjectPage.module.css b/packages/main/src/components/ObjectPage/ObjectPage.module.css index 81b1d248085..ae6f2a8ad2f 100644 --- a/packages/main/src/components/ObjectPage/ObjectPage.module.css +++ b/packages/main/src/components/ObjectPage/ObjectPage.module.css @@ -115,8 +115,8 @@ pointer-events: none; position: absolute; height: 1px; - bottom: -1px; - left: 0; + inset-block-end: -1px; + inset-inline-start: 0; width: 100%; box-shadow: var(--sapContent_HeaderShadow); } 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', () => {