fix(ui5-page): correct content overlap with shellbar header (#12124)

Author: ivoplashkov

packages/fiori/src/Page.ts

@@ -132,17 +132,6 @@ class Page extends UI5Element {
 	get _contentTop() {
 		return this.header.length ? "2.75rem" : "0rem";
 	}
-
-	get styles() {
-		return {
-			content: {
-				"padding-bottom": this.footer.length && this._contentPaddingBottom,
-				"scroll-padding-bottom": this.footer.length && this._contentPaddingBottom,
-				"bottom": this.footer.length && this._contentBottom,
-				"top": this._contentTop,
-			},
-		};
-	}
 }
 
 Page.define();

packages/fiori/src/PageTemplate.tsx

@@ -15,6 +15,7 @@ export default function PageTemplate(this: Page) {
 				class="ui5-page-content-root" style={{
 					"padding-bottom": this.footer.length && this._contentPaddingBottom,
 					"scroll-padding-bottom": this.footer.length && this._contentPaddingBottom,
+					"margin-bottom": this.footer.length && this._contentBottom,
 					"bottom": this.footer.length && this._contentBottom,
 					"top": this._contentTop,
 				}}>

packages/fiori/src/themes/Page.css

@@ -13,19 +13,19 @@
 	z-index: 0;
 	box-sizing: border-box;
 	background-color: inherit;
+	display: flex;
+	flex-direction: column;
 }
 
 .ui5-page-header-root {
 	z-index: 1;
+	flex-shrink: 0;
 }
 
 .ui5-page-content-root {
 	overflow: hidden auto;
-	position: absolute;
 	will-change: scroll-position;
-	width: 100%;
-	top: 2.75rem;
-	bottom: 0;
+	flex: 1;
 	box-sizing: border-box;
 	font-size: var(--sapFontSize);
 	color: var(--sapTextColor);