diff --git a/packages/main/src/components/ObjectPage/ObjectPage.module.css b/packages/main/src/components/ObjectPage/ObjectPage.module.css index 98f142c6ff8..ea7373b6310 100644 --- a/packages/main/src/components/ObjectPage/ObjectPage.module.css +++ b/packages/main/src/components/ObjectPage/ObjectPage.module.css @@ -13,9 +13,11 @@ white-space: normal; font-family: var(--sapFontFamily); background-color: var(--sapBackgroundColor); + overflow-x: hidden; overflow-y: auto; scroll-behavior: smooth; + &[data-in-iframe='true'] { scroll-behavior: auto; } @@ -31,6 +33,10 @@ } } +.withFooter { + scroll-padding-block-end: calc(var(--_ui5wcr-BarHeight) + 0.5rem); +} + .iconTabBarMode section[data-component-name='ObjectPageSection'] > div[role='heading'] { display: none; } diff --git a/packages/main/src/components/ObjectPage/index.tsx b/packages/main/src/components/ObjectPage/index.tsx index 50ebda46cb9..3a63942b3fb 100644 --- a/packages/main/src/components/ObjectPage/index.tsx +++ b/packages/main/src/components/ObjectPage/index.tsx @@ -558,7 +558,8 @@ const ObjectPage = forwardRef((props, ref const objectPageClasses = clsx( classNames.objectPage, className, - mode === ObjectPageMode.IconTabBar && classNames.iconTabBarMode + mode === ObjectPageMode.IconTabBar && classNames.iconTabBarMode, + footerArea && classNames.withFooter ); const { onScroll: _0, selectedSubSectionId: _1, ...propsWithoutOmitted } = rest; @@ -735,7 +736,8 @@ const ObjectPage = forwardRef((props, ref ); const objectPageStyles: CSSProperties = { - ...style + ...style, + scrollPaddingBlockStart: `${Math.ceil(topHeaderHeight + TAB_CONTAINER_HEADER_HEIGHT + (!headerCollapsed && headerPinned ? headerContentHeight : 0))}px` }; if (headerCollapsed === true && headerArea) { objectPageStyles[ObjectPageCssVariables.titleFontSize] = ThemingParameters.sapObjectHeader_Title_SnappedFontSize;