dossier: improve header layout on small screens

- A long procedure title can now overflow under the status label
- Better icon placement

app/assets/stylesheets/new_design/dossier_show.scss

@@ -2,24 +2,32 @@
 @import "constants";
 
 #dossier-show {
+  .sub-header {
+    .label {
+      float: right;
+      margin-left: $default-spacer;
+    }
+
+    .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;
-
-    .icon.folder {
-      vertical-align: -3px;
-    }
     }
 
     h2 {
-    margin-left: 31px;
-    margin-bottom: $default-padding;
       color: $grey;
       font-weight: bold;
     }
-
-  .sub-header .label {
-    flex-shrink: 0;
   }
 }

app/views/new_user/dossiers/show/_header.html.haml

@@ -1,15 +1,12 @@
 .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 }
 
+    .title-container
+      %span.icon.folder
+      %h1= dossier.procedure.libelle
+      %h2 Dossier nº #{dossier.id}
+
     %ul.tabs
       %li.active
         = link_to "Résumé", dossier_path(dossier)