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,31 +53,32 @@
         locals: { champ: champ, form: champ_form }
 
     - if !apercu
-      .send-dossier-actions-bar
-        - if dossier.brouillon?
-          - if autosave_available?(dossier)
-            = render partial: 'users/dossiers/autosave'
+      .dossier-edit-sticky-footer
+        .send-dossier-actions-bar
+          - if dossier.brouillon?
+            - if autosave_available?(dossier)
+              = render partial: 'users/dossiers/autosave'
+            - else
+              = f.button 'Enregistrer le brouillon',
+                formnovalidate: true,
+                class: 'button send secondary',
+                data: { 'disable-with': "Envoi en cours…" }
+
+            - if dossier.can_transition_to_en_construction?
+              = f.button 'Déposer le dossier',
+                name: :submit_draft,
+                value: true,
+                class: 'button send primary',
+                disabled: !current_user.owns?(dossier),
+                data: { 'disable-with': "Envoi en cours…" }
+
           - else
-            = f.button 'Enregistrer le brouillon',
-              formnovalidate: true,
-              class: 'button send secondary',
-              data: { 'disable-with': "Envoi en cours…" }
-
-          - if dossier.can_transition_to_en_construction?
-            = f.button 'Déposer le dossier',
-              name: :submit_draft,
-              value: true,
+            = f.button 'Enregistrer les modifications du dossier',
               class: 'button send primary',
-              disabled: !current_user.owns?(dossier),
               data: { 'disable-with': "Envoi en cours…" }
 
-        - else
-          = f.button 'Enregistrer les modifications du dossier',
-            class: 'button send primary',
-            data: { 'disable-with': "Envoi en cours…" }
+        - if dossier.brouillon? && !current_user.owns?(dossier)
+          .send-notice.invite-cannot-submit
+            En tant qu’invité, vous pouvez remplir ce formulaire – mais le titulaire du dossier doit le déposer lui-même.
 
-      - if dossier.brouillon? && !current_user.owns?(dossier)
-        .send-notice.invite-cannot-submit
-          En tant qu’invité, vous pouvez remplir ce formulaire – mais le titulaire du dossier doit le déposer lui-même.
-
-      = render partial: "shared/dossiers/submit_is_over", locals: { dossier: dossier }
+        = render partial: "shared/dossiers/submit_is_over", locals: { dossier: dossier }