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 {
-  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;
-  }
 }

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