better event-notes typography

app/assets/stylesheets/gitlab_bootstrap/typography.scss

@@ -95,3 +95,7 @@ a:focus {
   .white .highlight pre { background: #f5f5f5; }
   ul { margin: 0 0 9px 25px !important; }
 }
+
+.md {
+  @include md-typography;
+}

app/assets/stylesheets/sections/events.scss

@@ -48,15 +48,13 @@
       color: #666;
     }
     .event-note {
-      padding-top: 5px;
-      padding-left: 5px;
-      display: inline-block;
       color: #555;
+      margin-top: 5px;
+      margin-left: 40px;
 
       .note-file-attach {
-        margin-left: -25px;
-        float: left;
         .note-image-attach {
+          margin-top: 4px;
           margin-left: 0px;
           max-width: 200px;
         }
@@ -66,8 +64,8 @@
       color: #777;
       float: left;
       font-size: 16px;
-      line-height: 18px;
-      margin: 5px;
+      line-height: 16px;
+      margin-right: 5px;
     }
   }
   .avatar {

app/views/events/event/_note.html.haml

@@ -21,9 +21,10 @@
     = event.project_name
 
 .event-body
-  %i.icon-comment-alt.event-note-icon
-  %span.event-note
-    = markdown truncate(event.target.note, length: 70)
+  .event-note
+    .md
+      %i.icon-comment-alt.event-note-icon
+      = sanitize(markdown(truncate(event.target.note, length: 150)), tags: %w(a img b pre p))
     - note = event.target
     - if note.attachment.url
       = link_to note.attachment.secure_url, target: "_blank", class: 'note-file-attach' do