From 1c324f49135112177f74776636f96e0ce214466b Mon Sep 17 00:00:00 2001 From: Lukas Harbarth Date: Wed, 19 Mar 2025 14:50:25 +0100 Subject: [PATCH 1/3] fix(ObjectPage): always show focused elements in content --- packages/main/src/components/ObjectPage/ObjectPage.module.css | 3 +++ packages/main/src/components/ObjectPage/index.tsx | 3 ++- 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/main/src/components/ObjectPage/ObjectPage.module.css b/packages/main/src/components/ObjectPage/ObjectPage.module.css index 98f142c6ff8..efedb83d9ef 100644 --- a/packages/main/src/components/ObjectPage/ObjectPage.module.css +++ b/packages/main/src/components/ObjectPage/ObjectPage.module.css @@ -13,9 +13,12 @@ white-space: normal; font-family: var(--sapFontFamily); background-color: var(--sapBackgroundColor); + overflow-x: hidden; overflow-y: auto; scroll-behavior: smooth; + scroll-padding-block-end: calc(var(--_ui5wcr-BarHeight) + 0.5rem); + &[data-in-iframe='true'] { scroll-behavior: auto; } diff --git a/packages/main/src/components/ObjectPage/index.tsx b/packages/main/src/components/ObjectPage/index.tsx index 50ebda46cb9..b9009e52ce1 100644 --- a/packages/main/src/components/ObjectPage/index.tsx +++ b/packages/main/src/components/ObjectPage/index.tsx @@ -735,7 +735,8 @@ const ObjectPage = forwardRef((props, ref ); const objectPageStyles: CSSProperties = { - ...style + ...style, + scrollPaddingBlockStart: `${Math.ceil(topHeaderHeight + TAB_CONTAINER_HEADER_HEIGHT)}px` }; if (headerCollapsed === true && headerArea) { objectPageStyles[ObjectPageCssVariables.titleFontSize] = ThemingParameters.sapObjectHeader_Title_SnappedFontSize; From f1e4dbe95764630d16f46a9bf2d74436e4f00ec5 Mon Sep 17 00:00:00 2001 From: Lukas Harbarth Date: Wed, 19 Mar 2025 15:03:38 +0100 Subject: [PATCH 2/3] Update index.tsx --- packages/main/src/components/ObjectPage/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/main/src/components/ObjectPage/index.tsx b/packages/main/src/components/ObjectPage/index.tsx index b9009e52ce1..e9fb2a8b904 100644 --- a/packages/main/src/components/ObjectPage/index.tsx +++ b/packages/main/src/components/ObjectPage/index.tsx @@ -736,7 +736,7 @@ const ObjectPage = forwardRef((props, ref const objectPageStyles: CSSProperties = { ...style, - scrollPaddingBlockStart: `${Math.ceil(topHeaderHeight + TAB_CONTAINER_HEADER_HEIGHT)}px` + scrollPaddingBlockStart: `${Math.ceil(topHeaderHeight + TAB_CONTAINER_HEADER_HEIGHT + (!headerCollapsed && headerPinned ? headerContentHeight : 0))}px` }; if (headerCollapsed === true && headerArea) { objectPageStyles[ObjectPageCssVariables.titleFontSize] = ThemingParameters.sapObjectHeader_Title_SnappedFontSize; From 3cbc4571ecd52b650c5aa1d7b440bc99d86a7e54 Mon Sep 17 00:00:00 2001 From: Lukas Harbarth Date: Wed, 19 Mar 2025 15:19:28 +0100 Subject: [PATCH 3/3] only apply scrollPaddingBlockEnd if footer is rendered --- .../main/src/components/ObjectPage/ObjectPage.module.css | 5 ++++- packages/main/src/components/ObjectPage/index.tsx | 3 ++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/main/src/components/ObjectPage/ObjectPage.module.css b/packages/main/src/components/ObjectPage/ObjectPage.module.css index efedb83d9ef..ea7373b6310 100644 --- a/packages/main/src/components/ObjectPage/ObjectPage.module.css +++ b/packages/main/src/components/ObjectPage/ObjectPage.module.css @@ -17,7 +17,6 @@ overflow-x: hidden; overflow-y: auto; scroll-behavior: smooth; - scroll-padding-block-end: calc(var(--_ui5wcr-BarHeight) + 0.5rem); &[data-in-iframe='true'] { scroll-behavior: auto; @@ -34,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 e9fb2a8b904..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;