diff --git a/packages/main/src/components/ObjectPage/ObjectPage.cy.tsx b/packages/main/src/components/ObjectPage/ObjectPage.cy.tsx
index a457dfa2cca..0ac7d1137aa 100644
--- a/packages/main/src/components/ObjectPage/ObjectPage.cy.tsx
+++ b/packages/main/src/components/ObjectPage/ObjectPage.cy.tsx
@@ -114,7 +114,7 @@ describe('ObjectPage', () => {
cy.get('[ui5-tabcontainer]').findUi5TabByText('Section 15').should('have.attr', 'aria-selected', 'true');
if (mode === ObjectPageMode.Default) {
- cy.findByTestId('op').scrollTo(0, 4660);
+ cy.findByTestId('op').scrollTo(0, 4750);
cy.findByText('Content 7').should('be.visible');
cy.get('[ui5-tabcontainer]').findUi5TabByText('Section 7').should('have.attr', 'aria-selected', 'true');
@@ -124,7 +124,7 @@ describe('ObjectPage', () => {
for (let i = 0; i < 15; i++) {
cy.findByText('Add').click();
}
- cy.findByTestId('op').scrollTo(0, 4660);
+ cy.findByTestId('op').scrollTo(0, 4750);
cy.findByText('Content 7').should('be.visible');
cy.get('[ui5-tabcontainer]').findUi5TabByText('Section 7').should('have.attr', 'aria-selected', 'true');
@@ -712,19 +712,19 @@ describe('ObjectPage', () => {
};
cy.mount();
cy.findByText('Update Heights').click();
- cy.findByText('{"offset":1080,"scroll":2270}').should('exist');
+ cy.findByText('{"offset":1080,"scroll":2290}').should('exist');
cy.findByTestId('op').scrollTo('bottom');
cy.findByText('Update Heights').click({ force: true });
- cy.findByText('{"offset":1080,"scroll":2270}').should('exist');
+ cy.findByText('{"offset":1080,"scroll":2290}').should('exist');
cy.mount();
cy.findByText('Update Heights').click();
- cy.findByText('{"offset":1080,"scroll":2320}').should('exist');
+ cy.findByText('{"offset":1080,"scroll":2330}').should('exist');
cy.findByTestId('op').scrollTo('bottom');
cy.findByText('Update Heights').click({ force: true });
- cy.findByText('{"offset":1080,"scroll":2320}').should('exist');
+ cy.findByText('{"offset":1080,"scroll":2330}').should('exist');
cy.mount();
cy.findByText('Update Heights').click();
@@ -809,19 +809,19 @@ describe('ObjectPage', () => {
};
cy.mount();
cy.findByText('Update Heights').click();
- cy.findByText('{"offset":1080,"scroll":2270}').should('exist');
+ cy.findByText('{"offset":1080,"scroll":2290}').should('exist');
cy.findByTestId('op').scrollTo('bottom');
cy.findByText('Update Heights').click({ force: true });
- cy.findByText('{"offset":1080,"scroll":2270}').should('exist');
+ cy.findByText('{"offset":1080,"scroll":2290}').should('exist');
cy.mount();
cy.findByText('Update Heights').click();
- cy.findByText('{"offset":1080,"scroll":2330}').should('exist');
+ cy.findByText('{"offset":1080,"scroll":2350}').should('exist');
cy.findByTestId('op').scrollTo('bottom');
cy.findByText('Update Heights').click({ force: true });
- cy.findByText('{"offset":1080,"scroll":2330}').should('exist');
+ cy.findByText('{"offset":1080,"scroll":2350}').should('exist');
cy.mount();
cy.findByText('Update Heights').click();
diff --git a/packages/main/src/components/ObjectPageSection/ObjectPageSection.module.css b/packages/main/src/components/ObjectPageSection/ObjectPageSection.module.css
index aba75b68273..79179ccac5a 100644
--- a/packages/main/src/components/ObjectPageSection/ObjectPageSection.module.css
+++ b/packages/main/src/components/ObjectPageSection/ObjectPageSection.module.css
@@ -4,10 +4,11 @@
&:first-of-type {
margin-block-start: 1px;
}
+ margin-block-end: 1rem;
}
.section [data-component-name='ObjectPageSubSection']:not(:first-child) {
- padding-block-start: 0.5rem;
+ padding-block-start: 1rem;
}
.section:focus {
@@ -28,8 +29,8 @@
}
.title {
- height: var(--_ui5wcr_ObjectPage_SectionTitleHeight);
- line-height: var(--_ui5wcr_ObjectPage_SectionTitleLineHeight);
+ height: 2.25rem;
+ line-height: 2.25rem;
color: var(--sapGroup_TitleTextColor);
font-size: var(--sapFontHeader4Size);
display: inline-block;
@@ -62,7 +63,7 @@
}
.sectionContentInner {
- padding-block: 0.5rem;
+ padding-block-start: 1rem;
font-family: var(--sapFontFamily);
height: 100%;
box-sizing: border-box;
diff --git a/packages/main/src/components/ObjectPageSubSection/ObjectPageSubSection.module.css b/packages/main/src/components/ObjectPageSubSection/ObjectPageSubSection.module.css
index dd8aebe2ec5..f8bb32d3d5d 100644
--- a/packages/main/src/components/ObjectPageSubSection/ObjectPageSubSection.module.css
+++ b/packages/main/src/components/ObjectPageSubSection/ObjectPageSubSection.module.css
@@ -27,7 +27,7 @@
.subSectionContent {
background-color: var(--_ui5wcr_ObjectPage_SubSectionBackgroundColor);
border-radius: var(--_ui5wcr_ObjectPage_SubSectionBorderRadius);
- padding-block: 1rem;
+ padding-block: 0.5rem;
}
.spacer {
diff --git a/packages/main/src/components/ThemeProvider/ThemeProvider.cy.tsx b/packages/main/src/components/ThemeProvider/ThemeProvider.cy.tsx
index e5a16a4811e..98118363232 100644
--- a/packages/main/src/components/ThemeProvider/ThemeProvider.cy.tsx
+++ b/packages/main/src/components/ThemeProvider/ThemeProvider.cy.tsx
@@ -23,11 +23,11 @@ describe('ThemeProvider', () => {
it('injects css via JS', () => {
cy.mount(Hello World);
- cy.get('html').should('have.css', '--_ui5wcr_ObjectPage_SectionTitleLineHeight', '4rem');
+ cy.get('html').should('have.css', '--_ui5wcr_Scrollbar_Border', 'none');
});
it('does not inject CSS when staticCssInjected is true', () => {
cy.mount(Hello World, { themeProviderProps: { staticCssInjected: true } });
- cy.get('html').should('not.have.css', '--_ui5wcr_ObjectPage_SectionTitleLineHeight');
+ cy.get('html').should('not.have.css', '--_ui5wcr_Scrollbar_Border');
});
});
diff --git a/packages/main/src/themes/base.css b/packages/main/src/themes/base.css
index 8c9d7060c66..b9f26715359 100644
--- a/packages/main/src/themes/base.css
+++ b/packages/main/src/themes/base.css
@@ -20,6 +20,7 @@
--_ui5wcr_ActionSheet_MobileHeaderBoxShadow: none;
--_ui5wcr_ActionSheet_MobileHeaderTextColor: var(--sapContent_ContrastTextColor);
--_ui5wcr_ObjectPage_SectionTitleFontFamily: var(--sapFontFamily);
+ /*ToDo: no used anymore - remove in next major version */
--_ui5wcr_ObjectPage_SectionTitleLineHeight: 2.25rem;
--_ui5wcr_ObjectPage_SubSectionBorderRadius: 0;
--_ui5wcr_Splitter_BarBorderHighContrastFix: var(--sapContent_FocusWidth) solid var(--sapContent_FocusColor);
diff --git a/packages/main/src/themes/sap_horizon.css b/packages/main/src/themes/sap_horizon.css
index d9cc2519cca..fff490d74d3 100644
--- a/packages/main/src/themes/sap_horizon.css
+++ b/packages/main/src/themes/sap_horizon.css
@@ -13,7 +13,6 @@
--_ui5wcr_ActionSheet_MobileHeaderBoxShadow: var(--sapContent_Shadow2);
--_ui5wcr_ActionSheet_MobileHeaderTextColor: var(--sapPageHeader_TextColor);
--_ui5wcr_ObjectPage_SectionTitleFontFamily: var(--sapFontBoldFamily);
- --_ui5wcr_ObjectPage_SectionTitleLineHeight: 4rem;
--_ui5wcr_ObjectPage_SubSectionBorderRadius: var(--sapElement_BorderCornerRadius);
--_ui5wcr_ActionSheet_MobileHeaderBackground: var(--sapPageHeader_Background);
--_ui5wcr_ActionSheet_MobileHeaderBorderRadius: var(--sapPopover_BorderCornerRadius);
diff --git a/packages/main/src/themes/sap_horizon_dark.css b/packages/main/src/themes/sap_horizon_dark.css
index 2847653385e..16ef8bed203 100644
--- a/packages/main/src/themes/sap_horizon_dark.css
+++ b/packages/main/src/themes/sap_horizon_dark.css
@@ -13,7 +13,6 @@
--_ui5wcr_ActionSheet_MobileHeaderBoxShadow: var(--sapContent_Shadow2);
--_ui5wcr_ActionSheet_MobileHeaderTextColor: var(--sapPageHeader_TextColor);
--_ui5wcr_ObjectPage_SectionTitleFontFamily: var(--sapFontBoldFamily);
- --_ui5wcr_ObjectPage_SectionTitleLineHeight: 4rem;
--_ui5wcr_ObjectPage_SubSectionBorderRadius: var(--sapElement_BorderCornerRadius);
--_ui5wcr_ActionSheet_MobileHeaderBackground: var(--sapPageHeader_Background);
--_ui5wcr_ActionSheet_MobileHeaderBorderRadius: var(--sapPopover_BorderCornerRadius);