fix(ObjectPage): support section selection in iframe (#6535) (#6542)

Also fixes two flaky ObjectPage tests

Author: Lukas742

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

@@ -242,7 +242,7 @@ describe('ObjectPage', () => {
   it('scroll to sections - default mode', () => {
     document.body.style.margin = '0px';
     cy.mount(
-      <ObjectPage headerTitle={DPTitle} headerContent={DPContent}>
+      <ObjectPage headerTitle={DPTitle} headerContent={DPContent} style={{ height: '100vh', scrollBehavior: 'auto' }}>
         {OPContent}
       </ObjectPage>
     );
@@ -267,7 +267,12 @@ describe('ObjectPage', () => {
     cy.findByText('Job Relationship').should('be.visible');
 
     cy.mount(
-      <ObjectPage headerTitle={DPTitle} headerContent={DPContent} footer={Footer}>
+      <ObjectPage
+        headerTitle={DPTitle}
+        headerContent={DPContent}
+        footer={Footer}
+        style={{ height: '100vh', scrollBehavior: 'auto' }}
+      >
         {OPContent}
       </ObjectPage>
     );
@@ -311,7 +316,7 @@ describe('ObjectPage', () => {
         headerTitle={DPTitle}
         headerContent={DPContent}
         mode={ObjectPageMode.IconTabBar}
-        style={{ height: '100vh' }}
+        style={{ height: '100vh', scrollBehavior: 'auto' }}
       >
         {OPContent}
       </ObjectPage>
@@ -341,7 +346,7 @@ describe('ObjectPage', () => {
         headerContent={DPContent}
         footer={Footer}
         mode={ObjectPageMode.IconTabBar}
-        style={{ height: '100vh' }}
+        style={{ height: '100vh', scrollBehavior: 'auto' }}
       >
         {OPContent}
       </ObjectPage>

packages/main/src/components/ObjectPage/ObjectPage.mdx

@@ -6,11 +6,14 @@ import { DynamicPageTitle } from '../DynamicPageTitle';
 import { DynamicPageHeader } from '../DynamicPageHeader';
 import { ObjectPageSection } from '../ObjectPageSection';
 import { ObjectPageSubSection } from '../ObjectPageSubSection';
+import { MessageStrip } from '@ui5/webcomponents-react';
 
 <Meta of={ComponentStories} />
 
 <DocsHeader subComponents={['DynamicPageTitle', 'DynamicPageHeader', 'ObjectPageSection', 'ObjectPageSubSection']} />
 
+<MessageStrip hideCloseButton children={'In iframes, smooth scrolling is disabled!'} />
+
 ## Example
 
 <Canvas of={ComponentStories.Default} />

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

@@ -16,6 +16,9 @@
   overflow-x: hidden;
   overflow-y: auto;
   scroll-behavior: smooth;
+  &[data-in-iframe='true'] {
+    scroll-behavior: auto;
+  }
   section[id*='ObjectPageSection-'] > div[role='heading'] {
     display: none;
   }

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

@@ -319,8 +319,10 @@ const ObjectPage = forwardRef<HTMLDivElement, ObjectPagePropTypes>((props, ref)
         TAB_CONTAINER_HEADER_HEIGHT +
         (headerPinned && !headerCollapsed ? headerContentHeight : 0) +
         'px';
-      section.focus();
-      section.scrollIntoView({ behavior: 'smooth' });
+      if (isSubSection) {
+        section.focus();
+      }
+      section.scrollIntoView();
       section.style.scrollMarginBlockStart = '0px';
     }
   };
@@ -330,7 +332,7 @@ const ObjectPage = forwardRef<HTMLDivElement, ObjectPagePropTypes>((props, ref)
       return;
     }
     if (firstSectionId === sectionId) {
-      objectPageRef.current?.scrollTo({ top: 0, behavior: 'smooth' });
+      objectPageRef.current?.scrollTo({ top: 0 });
     } else {
       scrollToSectionById(sectionId);
     }
@@ -766,6 +768,7 @@ const ObjectPage = forwardRef<HTMLDivElement, ObjectPagePropTypes>((props, ref)
       style={objectPageStyles}
       ref={componentRef}
       onScroll={onObjectPageScroll}
+      data-in-iframe={window && window.self !== window.top}
       {...propsWithoutOmitted}
     >
       <header