fix: keep the footer at the bottom of the page (#1318)

Due to the asynchronous loading of the pages or less content on a page than the window height can hold, the footer sometimes goes up to the header. A pre-sizing of the main container via styling avoids this unpleasant effect.

application shell styling cleanup + migration note

Co-authored-by: Stefan Hauke <s.hauke@intershop.de>

docs/guides/migrations.md

@@ -7,6 +7,11 @@ kb_sync_latest_only
 
 # Migrations
 
+## 3.1 to 3.2
+
+A styling adaption was made to the application shell to expand it to the full page height so the footer now always stays at the bottom.
+Together with that an inline style of the `main-container` was moved to the global styling definition.
+
 ## 3.0 to 3.1
 
 The SSR environment variable 'ICM_IDENTITY_PROVIDER' will be removed in a future release ( PWA 5.0 ).

src/app/app.component.html

@@ -1,13 +1,13 @@
-<div [ngClass]="wrapperClasses$ | async">
+<div [ngClass]="wrapperClasses$ | async" class="d-flex flex-column min-vh-100">
   <header data-testing-id="page-header" class="top"><ish-header></ish-header></header>
 
   <div class="wrapper">
-    <div role="main" class="container main-container" style="position: relative; min-height: 200px">
+    <div role="main" class="container main-container">
       <router-outlet></router-outlet>
     </div>
   </div>
 
-  <footer data-testing-id="section-footer">
+  <footer data-testing-id="section-footer" class="mt-auto">
     <ish-footer [deviceType]="deviceType$ | async"></ish-footer>
   </footer>
 </div>

src/app/extensions/store-locator/pages/store-locator/store-locator-page.component.html

@@ -1,7 +1,8 @@
-<h1 class="mt-5">{{ 'store_locator.title' | translate }}</h1>
+<h1>{{ 'store_locator.title' | translate }}</h1>
 
 <p>{{ 'store_locator.description' | translate }}</p>
 <p>{{ 'store_locator.howto' | translate }}</p>
+
 <form [formGroup]="form" (ngSubmit)="submitForm()">
   <div class="row">
     <fieldset class="col-sm-8">

src/styles/global/global.scss

@@ -2,6 +2,8 @@
 // LAYOUT
 // contains layout and presentation classes for the global page structure (header, footer, global navigation, ...)
 .main-container {
+  position: relative;
+  min-height: 200px;
   background: $color-inverse;
 }