Extract some CSS in a .message class

app/assets/stylesheets/new_design/messagerie.scss

@@ -10,19 +10,19 @@
   padding: 2 * $default-spacer;
   margin-bottom: $default-spacer;
   border-radius: 4px;
+}
 
-  > li {
-    display: flex;
-    align-items: flex-start;
-    margin-bottom: $default-padding;
-    padding: $default-padding;
-    background: #FFFFFF;
-    width: 80%;
-    border-radius: 3px;
+.message {
+  display: flex;
+  align-items: flex-start;
+  margin-bottom: $default-padding;
+  padding: $default-padding;
+  background: #FFFFFF;
+  width: 80%;
+  border-radius: 3px;
 
-    &.from-me {
-      margin-left: auto;
-    }
+  &.from-me {
+    margin-left: auto;
   }
 }
 

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 }