From c7ba3cbd59b9caff42205b19885653b63fea3304 Mon Sep 17 00:00:00 2001
From: Pierre de La Morinerie <kemenaran@gmail.com>
Date: Fri, 10 Aug 2018 15:32:39 +0200
Subject: [PATCH] dossier: improve header layout on small screens

- A long procedure title can now overflow under the status label
- Better icon placement
---
 .../stylesheets/new_design/dossier_show.scss  | 42 +++++++++++--------
 .../new_user/dossiers/show/_header.html.haml  | 13 +++---
 2 files changed, 30 insertions(+), 25 deletions(-)

diff --git a/app/assets/stylesheets/new_design/dossier_show.scss b/app/assets/stylesheets/new_design/dossier_show.scss
index 5a1e7a1b0..66dc60376 100644
--- a/app/assets/stylesheets/new_design/dossier_show.scss
+++ b/app/assets/stylesheets/new_design/dossier_show.scss
@@ -2,24 +2,32 @@
 @import "constants";
 
 #dossier-show {
-  h1 {
-    color: $black;
-    font-size: 22px;
-    margin-bottom: 0;
+  .sub-header {
+    .label {
+      float: right;
+      margin-left: $default-spacer;
+    }
 
-    .icon.folder {
-      vertical-align: -3px;
+    .title-container {
+      margin-bottom: $default-padding * 2;
+      padding-left: 32px;
+
+      .icon.folder {
+        float: left;
+        margin-left: -32px;
+        margin-top: 3px;
+      }
+    }
+
+    h1 {
+      color: $black;
+      font-size: 22px;
+      margin-bottom: 0;
+    }
+
+    h2 {
+      color: $grey;
+      font-weight: bold;
     }
   }
-
-  h2 {
-    margin-left: 31px;
-    margin-bottom: $default-padding;
-    color: $grey;
-    font-weight: bold;
-  }
-
-  .sub-header .label {
-    flex-shrink: 0;
-  }
 }
diff --git a/app/views/new_user/dossiers/show/_header.html.haml b/app/views/new_user/dossiers/show/_header.html.haml
index acd34c744..c4d4b63d4 100644
--- a/app/views/new_user/dossiers/show/_header.html.haml
+++ b/app/views/new_user/dossiers/show/_header.html.haml
@@ -1,14 +1,11 @@
 .sub-header
   .container
-    .flex.justify-between.align-baseline
-      .title-container
-        %h1
-          %span.icon.folder
-          = dossier.procedure.libelle
-        %h2
-          Dossier nº #{dossier.id}
+    = render partial: 'shared/dossiers/status', locals: { dossier: dossier }
 
-      = render partial: 'shared/dossiers/status', locals: { dossier: dossier }
+    .title-container
+      %span.icon.folder
+      %h1= dossier.procedure.libelle
+      %h2 Dossier nº #{dossier.id}
 
     %ul.tabs
       %li.active