From b7f6c4c43e1834856e19b32e0759964ae35a0591 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javi=20Mart=C3=ADn?= <javim@elretirao.net>
Date: Sat, 19 Jun 2021 15:44:11 +0200
Subject: [PATCH] Fix footer on Internet Explorer 11

There are two bugs in Internet Explorer which caused our footer to be
rendered incorrectly.

First, the `flex: 1` property doesn't work so well when `flex-direction`
is set to `column`. We're replacing it with `flex-grow: 1`. No need to
set other `flex-basis` nor `flex-shrink` in this case since in this case
the default values will work just fine.

Second, it didn't handle the body height being set to `100%` so well,
and the footer was rendered after that 100% point, even if the content
still continued.

So we're using `min-height` instead, which is actually a bit more
accurate (since the body is usually taller than the document root
element). This causes a different issue since on IE the `flex-grow: 1`
property becomes useless. This will only affect IE users with very large
screens, though, and it's way better than rendering the footer
overlapping the main content, so we can live with that. The page won't
look as great as in other browser, but it will still be usable.
---
 app/assets/stylesheets/layout.scss                      | 8 ++++++--
 app/assets/stylesheets/mixins/layouts.scss              | 3 ++-
 app/assets/stylesheets/widgets/feeds/participation.scss | 2 +-
 3 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss
index 9c9398e60..96cad7920 100644
--- a/app/assets/stylesheets/layout.scss
+++ b/app/assets/stylesheets/layout.scss
@@ -39,17 +39,21 @@ html {
 
 html,
 body {
-  height: 100%;
   margin: 0;
 }
 
+html {
+  height: 100%;
+}
+
 body {
   display: flex;
   flex-direction: column;
   font-size: $base-font-size;
+  min-height: 100%;
 
   > .wrapper {
-    flex: 1;
+    flex-grow: 1;
   }
 }
 
diff --git a/app/assets/stylesheets/mixins/layouts.scss b/app/assets/stylesheets/mixins/layouts.scss
index c5d6a63fd..f4656f424 100644
--- a/app/assets/stylesheets/mixins/layouts.scss
+++ b/app/assets/stylesheets/mixins/layouts.scss
@@ -1,11 +1,12 @@
 @mixin admin-layout {
+  height: 100%;
 
   > header {
     margin-bottom: 0;
   }
 
   > .menu-and-content {
-    flex: 1;
+    flex-grow: 1;
   }
 }
 
diff --git a/app/assets/stylesheets/widgets/feeds/participation.scss b/app/assets/stylesheets/widgets/feeds/participation.scss
index 0778effc2..c69d0feb9 100644
--- a/app/assets/stylesheets/widgets/feeds/participation.scss
+++ b/app/assets/stylesheets/widgets/feeds/participation.scss
@@ -17,7 +17,7 @@
       flex-direction: column;
 
       .feed-content {
-        flex: 1;
+        flex-grow: 1;
       }
     }
   }