feat(ObjectPage): allow fullscreen sections in TabBar mode (#5432)

#5430 needs to be merged first ✅

Closes #4818

Author: Lukas742

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

@@ -37,6 +37,22 @@ With these objectes it's possible to e.g. configure the overflow button displaye
 
 <Canvas of={ComponentStories.SectionWithCustomHeader} />
 
+## TabBar ObjectPage with fullscreen section
+
+To render a single section in fullscreen mode, set its height to `100%`.
+
+**Note:** This is only supported for sections in `TabBar` mode! Using multiple sections with `height: 100%;` on the same page will most probably break your layout.
+
+<Canvas of={ComponentStories.FullScreenSingleSection} />
+
+### Example section
+
+```jsx
+<ObjectPageSection titleText="Section with Overflow" id="section3" style={{ height: '100%', overflow: 'auto' }}>
+  <div style={{ height: '300%', background: 'lightyellow' }} />
+</ObjectPageSection>
+```
+
 <Markdown>{SubcomponentsSection}</Markdown>
 
 ## DynamicPageTitle

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

@@ -416,3 +416,26 @@ export const SectionWithCustomHeader: Story = {
     );
   }
 };
+
+export const FullScreenSingleSection: Story = {
+  args: { selectedSectionId: 'section1' },
+  name: 'with fullscreen section',
+  render(args) {
+    return (
+      <ObjectPage {...args} mode={ObjectPageMode.IconTabBar}>
+        <ObjectPageSection titleText="Section 1" id="section1" style={{ height: '100%' }}>
+          <div style={{ height: '100%', background: 'lightblue' }}>
+            It is recommended to only use fullscreen sections in TabBar mode, otherwise your layout will most probably
+            break!
+          </div>
+        </ObjectPageSection>
+        <ObjectPageSection titleText="Section 2" id="section2" style={{ height: '100%' }}>
+          <div style={{ height: '100%', background: 'lightgreen' }} />
+        </ObjectPageSection>
+        <ObjectPageSection titleText="Section with Overflow" id="section3" style={{ height: '100%', overflow: 'auto' }}>
+          <div style={{ height: '300%', background: 'lightyellow' }} />
+        </ObjectPageSection>
+      </ObjectPage>
+    );
+  }
+};

packages/main/src/components/ObjectPageSection/ObjectPageSection.jss.ts

@@ -44,11 +44,14 @@ const styles = {
     }
   },
   sectionContent: {
-    whiteSpace: 'normal'
+    whiteSpace: 'normal',
+    height: '100%'
   },
   sectionContentInner: {
     paddingBlock: '0.5rem',
-    fontFamily: ThemingParameters.sapFontFamily
+    fontFamily: ThemingParameters.sapFontFamily,
+    height: '100%',
+    boxSizing: 'border-box'
   }
 };