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', () => {