From 547c36243d09aa26ffceab3b212df552c9ace403 Mon Sep 17 00:00:00 2001
From: Pierre de La Morinerie <kemenaran@gmail.com>
Date: Tue, 24 Jul 2018 18:10:00 +0200
Subject: [PATCH] dossier: add responsive layout for action buttons

---
 app/assets/stylesheets/new_design/forms.scss | 36 +++++++++++++++++---
 1 file changed, 32 insertions(+), 4 deletions(-)

diff --git a/app/assets/stylesheets/new_design/forms.scss b/app/assets/stylesheets/new_design/forms.scss
index 470e78524..5322c2f90 100644
--- a/app/assets/stylesheets/new_design/forms.scss
+++ b/app/assets/stylesheets/new_design/forms.scss
@@ -281,15 +281,43 @@
   }
 
   .send-wrapper {
-    text-align: right;
-    margin-top: 2 * $default-padding;
+    display: flex;
+    width: 100%;
+    justify-content: flex-end;
+    margin-top: $default-padding;
     margin-bottom: 2 * $default-padding;
 
     .button {
+      margin-top: $default-padding;
       margin-bottom: 0;
     }
-    .button.danger {
-      float:left;
+
+    // Wide layout: align buttons on a single row
+    @media (min-width: 550px) {
+      flex-direction: row;
+
+      .button:not(:first-of-type) {
+        margin-left: $default-spacer;
+      }
+
+      .button.danger {
+        margin-right: auto;
+      }
+    }
+
+    // Narrow layout: stack buttons vertically
+    @media (max-width: 550px) {
+      flex-direction: column-reverse;
+      align-items: center;
+
+      .button,
+      .button.danger {
+        width: 100%;
+        max-width: 350px;
+        line-height: 30px;
+        margin-left: none;
+        margin-right: none;
+      }
     }
   }