Extract some CSS in a .message class

app/assets/stylesheets/new_design/messagerie.scss

@@ -10,8 +10,9 @@
   padding: 2 * $default-spacer;
   margin-bottom: $default-spacer;
   border-radius: 4px;
+}
 
-  > li {
+.message {
   display: flex;
   align-items: flex-start;
   margin-bottom: $default-padding;
@@ -24,7 +25,6 @@
     margin-left: auto;
   }
 }
-}
 
 .messagerie {
   .person-icon {

app/assets/stylesheets/new_design/print.scss

@@ -44,10 +44,6 @@ th {
     padding-left: 0;
     max-height: none;
 
-    li {
-      margin-bottom: 40px;
-    }
-
     h2 {
       font-size: 110%;
     }
@@ -58,6 +54,10 @@ th {
   }
 }
 
+.message {
+  margin-bottom: 40px;
+}
+
 .updated-at {
   display: none;
 }

app/views/shared/dossiers/_messagerie.html.haml

@@ -1,7 +1,7 @@
 .messagerie.container
   %ul.messages-list
     - dossier.commentaires.each do |commentaire|
-      %li{ class: commentaire_is_from_me_class(commentaire, user_email) }
+      %li.message{ class: commentaire_is_from_me_class(commentaire, user_email) }
         = render partial: "shared/dossiers/messages/message", locals: { commentaire: commentaire, user_email: user_email, messagerie_seen_at: messagerie_seen_at }
 
   = render partial: "shared/dossiers/messages/form", locals: { commentaire: new_commentaire, form_url: form_url }