Better formatting

assets/javascripts/discourse/templates/modal/staff-notes.hbs

@@ -3,14 +3,25 @@
   {{#each model as |n|}}
     <div class='staff-note'>
       <div class='posted-by'>
-        {{avatar n.created_by imageSize="tiny"}}
+        {{#user-link user=n.created_by}}
+          {{avatar n.created_by imageSize="small"}}
+        {{/user-link}}
       </div>
-      <div class='cooked'>{{cook-text n.raw}}</div>
+      <div class='note-contents'>
+        <div class='note-info'>
+          <span class='username'>{{n.created_by.username}}</span>
+          <span class='post-date'>{{age-with-tooltip n.created_at}}</span>
+        </div>
+
+        <div class='cooked'>
+          {{cook-text n.raw}}
+        </div>
+      </div>
+
       <div class='clearfix'></div>
     </div>
   {{/each}}
 
   {{textarea value=newNote}}
   {{d-button action="attachNote" label="staff_notes.attach" class="btn-primary" disabled=attachDisabled}}
-
 </div>

assets/stylesheets/staff_notes.scss

@@ -1,12 +1,24 @@
-.staff-notes-modal {
+.modal-body.staff-notes-modal {
   height: 300px;
 
+  textarea {
+    width: 99%;
+  }
+
   .posted-by {
-    width: 30px;
+    width: 40px;
     float: left;
   }
-  .cooked {
+  .note-contents {
-    float: left;
+    overflow: hidden;
+
+    .cooked {
+      margin-top: 0.5em;
+    }
+
+    .username {
+      font-weight: bold;
+    }
 
     p {
       margin: 0 0 1em 0;
@@ -16,6 +28,10 @@
   .staff-note {
     margin-bottom: 1em;
   }
+
+  .post-date {
+    float: right;
+  }
 }
 
 .staff-notes-icon {