Have limited display height for messages on dossiers#show

app/assets/javascripts/default_data_block.js

@@ -21,6 +21,7 @@ function init_default_data_block() {
         var block = $(element).parents('.show-block');
         if (block.attr('id') == 'messages') {
           block.children('.last-commentaire').toggle();
+          $(".commentaires").animate({ scrollTop: $(this).height() }, "slow");
         }
 
         block.children('.body').slideToggle(duration);

app/assets/stylesheets/dossier_show.scss

@@ -8,6 +8,13 @@
         margin-bottom: 20px;
       }
     }
+    .body {
+      .commentaires {
+        max-height: 350px;
+        overflow-y: scroll;
+        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.075) 0%, rgba(219, 219, 219, 0) 50%, rgba(250, 251, 253, 0.18) 51%, #ffffff 100%);
+      }
+    }
     .last-commentaire, .commentaire {
       padding: 20px 0 0 20px;
       .comment-header {

app/views/backoffice/dossiers/show.html.haml

@@ -11,8 +11,9 @@
           - message_count = @facade.commentaires.count
           = (message_count == 1) ? "1 message" : "#{message_count} messages"
       %div.body
-        - @facade.commentaires.object.sort.each do |commentaire|
+        %div.commentaires
-          = render partial: commentaire
+          - @facade.commentaires.object.sort.each do |commentaire|
+            = render partial: commentaire
         .row
           .col-lg-12.col-md-12
             %div.split-hr