KB public: fix IE11 layout bug

It adds a wrapper element around the contents inside the body  to workaround the wrong height calculation bug in IE11 : https://github.com/philipwalton/flexbugs#flexbug-3
Additionally it fixes a text overflow bug in grid elements.
Fixes #2600

app/assets/javascripts/knowledge_base_public/language.js

@@ -98,7 +98,7 @@
 
   LanguageDetector.show = function(lang) {
     var elem = new LanguageBannerElement(lang)
-    document.body.prepend(elem.el)
+    document.querySelector('.js-wrapper').prepend(elem.el)
   }
 
   LanguageDetector.checkIfBetterLanguageAvailable()

app/assets/stylesheets/knowledge_base.scss

@@ -99,7 +99,6 @@ body {
   overflow-y: scroll;
   display: flex;
   flex-direction: column;
-  min-height: 100vh;
 }
 
 h1 {
@@ -240,11 +239,18 @@ b {
   }
 }
 
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+
 .header {
   background: $light-bg;
   border-bottom: 1px solid $dark-border;
   position: relative;
   padding: .3em 0 .9em;
+  flex-shrink: 0;
 
   .container {
     display: flex;
@@ -422,7 +428,6 @@ b {
 }
 
 .main {
-  flex-grow: 1;
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
@@ -433,7 +438,7 @@ b {
   }
   
   .container {
-    flex: 1;
+    flex: 1 1 auto;
     display: flex;
     flex-direction: column;
   }
@@ -681,6 +686,7 @@ b {
   
       span {
         display: block;
+        max-width: 100%;
       }
     }
 
@@ -985,6 +991,7 @@ b {
 }
 
 .footer {
+  margin-top: auto;
   border-top: 1px solid $dark-border;
   background: $light-bg;
   color: hsl(210,8%,50%);

app/views/layouts/knowledge_base.html.erb

@@ -12,61 +12,63 @@
 <%= stylesheet_link_tag "knowledge_base.css", :media => 'all' %>
 <%= render 'knowledge_base/public/inline_stylesheet', knowledge_base: @knowledge_base %>
 
-<%= render 'knowledge_base/public/top_banner', object: @object || @knowledge_base if editor? %>
+<div class="wrapper js-wrapper">
+  <%= render 'knowledge_base/public/top_banner', object: @object || @knowledge_base if editor? %>
 
-<header class="header js-header">
+  <header class="header js-header">
-  <div class="container">
+    <div class="container">
-    <h1 class="logo">
+      <h1 class="logo">
-      <%= link_to custom_path_if_needed(help_root_path(locale: params[:locale])) do %>
+        <%= link_to custom_path_if_needed(help_root_path(locale: params[:locale])) do %>
-        <img src="/assets/images/<%= Setting.get('product_logo') %>">
+          <img src="/assets/images/<%= Setting.get('product_logo') %>">
-      <% end %>
+        <% end %>
-    </h1>
+      </h1>
-    <nav class="menu">
+      <nav class="menu">
-      <% menu_items.each do |menu_item| %>
+        <% menu_items.each do |menu_item| %>
-        <%= link_to menu_item.title, menu_item.url, class: 'menu-item', target: menu_item.new_tab ? '_blank' : nil %>
+          <%= link_to menu_item.title, menu_item.url, class: 'menu-item', target: menu_item.new_tab ? '_blank' : nil %>
-      <% end %>
+        <% end %>
-    </nav>
+      </nav>
-  </div>
-  <div class="container">
-    <div class="search">
-      <div class="search-field">
-        <%= icon 'magnifier' %>
-        <input class="js-search-input" type="search" placeholder="<%= zt('How can we help you? Search for an answer or a topic...') %>">
-      </div>
-      <ul class="search-results js-search-results" data-empty-placeholder="<%= zt('No results were found.') %>"></ul>
     </div>
-  </div>
+    <div class="container">
-</header>
+      <div class="search">
-
+        <div class="search-field">
-<%= render_breadcrumb_if_needed %>
+          <%= icon 'magnifier' %>
-
+          <input class="js-search-input" type="search" placeholder="<%= zt('How can we help you? Search for an answer or a topic...') %>">
-<%= yield %>
+        </div>
-
+        <ul class="search-results js-search-results" data-empty-placeholder="<%= zt('No results were found.') %>"></ul>
-<footer class="footer">
-  <div class="container">
-    <div class="footer-menu">
-      <div class="copyright">
-        <%= @knowledge_base.translation.footer_note %>
-      </div>
-      <div class="language-picker">
-        <a class="btn btn--action" href="#" data-toggle="dropdown" aria-expanded="false">
-          <%= system_locale_via_uri.name %>
-          <%= icon 'arrow-down' %>
-        </a>
-        <ul class="dropdown-menu dropdown-menu-right dropdown-menu-up" role="menu">
-          <% @object_locales&.each do |locale| %>
-            <li class="<%= 'is-selected' if locale.name == system_locale_via_uri.name %>">
-              <%= link_to custom_path_if_needed(url_for(locale: locale.locale)), hreflang: locale.locale do %>
-                <%= icon 'checkmark' %>
-                <%= locale.name %>
-              <% end %>
-            </li>
-          <% end %>
-        </ul>
       </div>
     </div>
-  </div>
+  </header>
-</footer>
+
+  <%= render_breadcrumb_if_needed %>
+
+  <%= yield %>
+
+  <footer class="footer">
+    <div class="container">
+      <div class="footer-menu">
+        <div class="copyright">
+          <%= @knowledge_base.translation.footer_note %>
+        </div>
+        <div class="language-picker">
+          <a class="btn btn--action" href="#" data-toggle="dropdown" aria-expanded="false">
+            <%= system_locale_via_uri.name %>
+            <%= icon 'arrow-down' %>
+          </a>
+          <ul class="dropdown-menu dropdown-menu-right dropdown-menu-up" role="menu">
+            <% @object_locales&.each do |locale| %>
+              <li class="<%= 'is-selected' if locale.name == system_locale_via_uri.name %>">
+                <%= link_to custom_path_if_needed(url_for(locale: locale.locale)), hreflang: locale.locale do %>
+                  <%= icon 'checkmark' %>
+                  <%= locale.name %>
+                <% end %>
+              </li>
+            <% end %>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </footer>
+</div>
 
 <script type='text/javascript'>
   if(window.fetch === undefined || window.Promise === undefined || Element.prototype.prepend === undefined){