fix(ObjectPage): always show focused elements in content (#7104)

Fixes #7057
Fixes #7010

Author: Lukas742

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;
 }

packages/main/src/components/ObjectPage/index.tsx

@@ -558,7 +558,8 @@ const ObjectPage = forwardRef<ObjectPageDomRef, ObjectPagePropTypes>((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<ObjectPageDomRef, ObjectPagePropTypes>((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;