From 4b883a57bfeddc6fab10851ab96757112f68b394 Mon Sep 17 00:00:00 2001
From: Pierre de La Morinerie <kemenaran@gmail.com>
Date: Thu, 12 Sep 2019 13:56:24 +0000
Subject: [PATCH] stylesheets: make the actions bar sticky

---
 .../stylesheets/new_design/dossier_edit.scss  | 66 ++++++++-----------
 .../stylesheets/new_design/new_footer.scss    |  4 --
 2 files changed, 28 insertions(+), 42 deletions(-)

diff --git a/app/assets/stylesheets/new_design/dossier_edit.scss b/app/assets/stylesheets/new_design/dossier_edit.scss
index 56023ada8..ad0490cfd 100644
--- a/app/assets/stylesheets/new_design/dossier_edit.scss
+++ b/app/assets/stylesheets/new_design/dossier_edit.scss
@@ -47,59 +47,49 @@
   }
 
   .send-dossier-actions-bar {
+    // scss-lint:disable VendorPrefix
+    position: -webkit-sticky;  // This is needed on Safari (tested on 12.1)
+    // scss-lint:enable VendorPrefix
+    position: sticky;
+    bottom: 0;
+
     display: flex;
-    width: 100%;
+    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;
     background: #FFFFFF;
-    position: fixed;
-    bottom: 0px;
     border: 1px solid #CCCCCC;
     border-top-left-radius: 5px;
     border-top-right-radius: 5px;
     border-bottom: none;
-    padding-top: 0px;
-    padding-bottom: $default-spacer;
-    padding-right: 30px;
-    padding-left: 30px;
-    margin: 0 auto;
-    margin-left: -30px;
-    max-width: 1100px;
 
     .button {
-      margin-top: $default-spacer;
+      min-height: 38px;
+      line-height: 16px;
     }
 
-    @media(max-width: 1100px) {
-      margin-left: -16px;
+    // If there are more than one button, align the "Send" button to the right
+    .button:not(:first-of-type).send {
+      margin-left: auto;
     }
 
-    // Wide layout: align buttons on a single row
-    @media (min-width: 550px) {
-      flex-direction: row;
-
-      .button:not(:first-of-type) {
-        margin-left: $default-spacer;
-      }
-
-      // If there are more than one button, align the "Send" button to the right
-      .button:not(:first-of-type).send {
-        margin-left: auto;
-      }
+    // Normal layout
+    @media (min-width: 500px) {
+      padding-top: $default-spacer * 2;
+      padding-bottom: $default-spacer * 2;
     }
 
-    // Narrow layout: stack buttons vertically
-    @media (max-width: 550px) {
-      flex-direction: column-reverse;
-      align-items: center;
-      margin-left: -16px;
-
-      .button {
-        width: 100%;
-        max-width: 350px;
-        line-height: 30px;
-        margin-left: none;
-        margin-right: none;
-      }
+    // Compact layout
+    @media (max-width: 500px) {
+      padding-top: $default-spacer;
+      padding-bottom: $default-spacer;
     }
   }
 }
diff --git a/app/assets/stylesheets/new_design/new_footer.scss b/app/assets/stylesheets/new_design/new_footer.scss
index d3048e7a9..092ee442b 100644
--- a/app/assets/stylesheets/new_design/new_footer.scss
+++ b/app/assets/stylesheets/new_design/new_footer.scss
@@ -108,10 +108,6 @@ footer {
 .footer-row {
   margin-bottom: 30px;
 
-  &:last-child {
-    margin-bottom: 35px;
-  }
-
   // In this case, the bottom margin is defined directly on each individual column
   &.footer-columns {
     margin-bottom: 0;