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

Also fixes two flaky ObjectPage tests

Author: Lukas742

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

@@ -259,7 +259,7 @@ describe('ObjectPage', () => {
   it('scroll to sections - default mode', () => {
     document.body.style.margin = '0px';
     cy.mount(
-      <ObjectPage titleArea={DPTitle} headerArea={DPContent}>
+      <ObjectPage titleArea={DPTitle} headerArea={DPContent} style={{ height: '100vh', scrollBehavior: 'auto' }}>
         {OPContent}
       </ObjectPage>
     );
@@ -287,7 +287,12 @@ describe('ObjectPage', () => {
     cy.findByText('Job Relationship').should('be.visible');
 
     cy.mount(
-      <ObjectPage titleArea={DPTitle} headerArea={DPContent} footerArea={Footer}>
+      <ObjectPage
+        titleArea={DPTitle}
+        headerArea={DPContent}
+        footerArea={Footer}
+        style={{ height: '100vh', scrollBehavior: 'auto' }}
+      >
         {OPContent}
       </ObjectPage>
     );
@@ -331,7 +336,7 @@ describe('ObjectPage', () => {
         titleArea={DPTitle}
         headerArea={DPContent}
         mode={ObjectPageMode.IconTabBar}
-        style={{ height: '100vh' }}
+        style={{ height: '100vh', scrollBehavior: 'auto' }}
       >
         {OPContent}
       </ObjectPage>
@@ -361,7 +366,7 @@ describe('ObjectPage', () => {
         headerArea={DPContent}
         footerArea={Footer}
         mode={ObjectPageMode.IconTabBar}
-        style={{ height: '100vh' }}
+        style={{ height: '100vh', scrollBehavior: 'auto' }}
       >
         {OPContent}
       </ObjectPage>

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

@@ -7,11 +7,14 @@ import { ObjectPageHeader } from '../ObjectPageHeader';
 import { ObjectPageSection } from '../ObjectPageSection';
 import { ObjectPageSubSection } from '../ObjectPageSubSection';
 import { CodeBlock } from '@sb/components/DomRefTable';
+import { MessageStrip } from '@ui5/webcomponents-react';
 
 <Meta of={ComponentStories} />
 
 <DocsHeader subComponents={['ObjectPageTitle', 'ObjectPageHeader', '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

@@ -334,8 +334,10 @@ const ObjectPage = forwardRef<ObjectPageDomRef, 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';
     }
   };
@@ -345,7 +347,7 @@ const ObjectPage = forwardRef<ObjectPageDomRef, ObjectPagePropTypes>((props, ref
       return;
     }
     if (firstSectionId === sectionId) {
-      objectPageRef.current?.scrollTo({ top: 0, behavior: 'smooth' });
+      objectPageRef.current?.scrollTo({ top: 0 });
     } else {
       scrollToSectionById(sectionId);
     }
@@ -729,6 +731,7 @@ const ObjectPage = forwardRef<ObjectPageDomRef, ObjectPagePropTypes>((props, ref
       style={objectPageStyles}
       ref={componentRef}
       onScroll={onObjectPageScroll}
+      data-in-iframe={window && window.self !== window.top}
       {...propsWithoutOmitted}
     >
       <header