dossiers: fix the sticky bar on IE 11

This allows IE 11 users to see the draft autosave indicator.

The layout on IE 11 is still buggy though - but it's better than
nothing.

app/assets/stylesheets/new_design/dossier_edit.scss

@@ -1,6 +1,8 @@
 @import "colors";
 @import "constants";
 
+$dossier-actions-bar-border-width: 1px;
+
 .dossier-header {
   .container {
     padding-bottom: $default-padding;
@@ -46,29 +48,40 @@
     border-radius: 4px;
   }
 
-  .send-dossier-actions-bar {
-    // scss-lint:disable VendorPrefix
+  .dossier-edit-sticky-footer {
+    // scss-lint:disable VendorPrefix DuplicateProperty
+    position: fixed;           // Fallback for IE 11, and other browser that don't support sticky
     position: -webkit-sticky;  // This is needed on Safari (tested on 12.1)
-    // scss-lint:enable VendorPrefix
     position: sticky;
+    // scss-lint:enable VendorPrefix DuplicateProperty
+
+    // IE 11 uses `position:fixed` – and thus needs an explicit width, content-box for better layout, etc.
+    width: 100%;
+    max-width: $page-width + 2 * $default-padding;
+    box-sizing: content-box;
+
     bottom: 0;
 
-    display: flex;
-    flex-direction: row;
-    align-items: center;
     margin-top: $default-padding;
     margin-left: -$default-padding;
     margin-right: -$default-padding;
     margin-bottom: 0;
-    padding-top: 0;
-    padding-bottom: $default-spacer;
-    padding-right: $default-padding;
-    padding-left: $default-padding;
+
+    padding-right: $default-padding - $dossier-actions-bar-border-width;
+    padding-left: $default-padding - $dossier-actions-bar-border-width;
+
     background: #FFFFFF;
-    border: 1px solid #CCCCCC;
+
+    border: $dossier-actions-bar-border-width solid #CCCCCC;
     border-top-left-radius: 5px;
     border-top-right-radius: 5px;
     border-bottom: none;
+  }
+
+  .send-dossier-actions-bar {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
 
     .button:not(:small) {
       min-height: 38px;
@@ -81,13 +94,13 @@
     }
 
     // Normal layout
-    @media (min-width: 500px) {
+    @media (min-width: 620px) {
       padding-top: $default-spacer * 2;
       padding-bottom: $default-spacer * 2;
     }
 
     // Compact layout
-    @media (max-width: 500px) {
+    @media (max-width: 620px) {
       padding-top: $default-spacer;
       padding-bottom: $default-spacer;
     }

app/views/shared/dossiers/_edit.html.haml

@@ -53,6 +53,7 @@
         locals: { champ: champ, form: champ_form }
 
     - if !apercu
+      .dossier-edit-sticky-footer
         .send-dossier-actions-bar
           - if dossier.brouillon?
             - if autosave_available?(dossier)