fix(DynamicPage): always show focused element when Tabbing in content (#6003)

Closes #6000

Author: Lukas742

packages/main/src/components/DynamicPage/DynamicPage.module.css

@@ -13,6 +13,11 @@
   --_ui5wcr_DynamicPage_title_fontsize: var(--sapObjectHeader_Title_FontSize);
 }
 
+.dynamicPage:has([data-component-name='DynamicPageFooter']) {
+  /* bar height + padding */
+  scroll-padding-block-end: calc(var(--_ui5_bar_base_height) + 1rem);
+}
+
 .headerCollapsed {
   --_ui5wcr_DynamicPage_header_display: none;
   --_ui5wcr_DynamicPage_title_fontsize: var(--sapObjectHeader_Title_SnappedFontSize);

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

@@ -319,12 +319,6 @@ const DynamicPage = forwardRef<HTMLDivElement, DynamicPagePropTypes>((props, ref
     }
   };
 
-  const dynamicPageStyles = { ...style };
-  if (headerCollapsed === true && headerContent) {
-    scrollTimeout.current = performance.now() + 200;
-    dynamicPageStyles[DynamicPageCssVariables.titleFontSize] = ThemingParameters.sapObjectHeader_Title_SnappedFontSize;
-  }
-
   useEffect(() => {
     if (typeof onToggleHeaderContent === 'function' && isToggledRef.current) {
       onToggleHeaderContent(headerCollapsed !== true);
@@ -336,6 +330,12 @@ const DynamicPage = forwardRef<HTMLDivElement, DynamicPagePropTypes>((props, ref
       ? (headerContentRef?.current?.offsetHeight ?? 0) + topHeaderHeight
       : topHeaderHeight;
 
+  const dynamicPageStyles = { ...style, scrollPaddingBlockStart: `calc(${top}px + 0.5rem)` };
+  if (headerCollapsed === true && headerContent) {
+    scrollTimeout.current = performance.now() + 200;
+    dynamicPageStyles[DynamicPageCssVariables.titleFontSize] = ThemingParameters.sapObjectHeader_Title_SnappedFontSize;
+  }
+
   return (
     <div
       ref={componentRef}