From feb16485318f476d55360a403769366d8e1607ed Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tristan=20Bouli=C3=A8re?=
 <108473857+tbouliere-datasolution@users.noreply.github.com>
Date: Wed, 9 Nov 2022 11:38:30 +0100
Subject: [PATCH] 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                                   | 5 +++++
 src/app/app.component.html                                  | 6 +++---
 .../pages/store-locator/store-locator-page.component.html   | 3 ++-
 src/styles/global/global.scss                               | 2 ++
 4 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/docs/guides/migrations.md b/docs/guides/migrations.md
index 7a714ed873..6663a2809c 100644
--- a/docs/guides/migrations.md
+++ b/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 ).
diff --git a/src/app/app.component.html b/src/app/app.component.html
index b98b45fa71..8aa2b4dbb3 100644
--- a/src/app/app.component.html
+++ b/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>
diff --git a/src/app/extensions/store-locator/pages/store-locator/store-locator-page.component.html b/src/app/extensions/store-locator/pages/store-locator/store-locator-page.component.html
index 84347aed49..2527834a82 100644
--- a/src/app/extensions/store-locator/pages/store-locator/store-locator-page.component.html
+++ b/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">
diff --git a/src/styles/global/global.scss b/src/styles/global/global.scss
index 9b25dbf1b9..c9a7a39d69 100644
--- a/src/styles/global/global.scss
+++ b/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;
 }