[ux] fix vertical centering of single messages

public/css/app/chat.styl

@@ -118,7 +118,7 @@
     padding: 10px 0
     width: 100%
     min-height: 50px
-    display: block
+    display: table
     borderbox()
     border-bottom: 1px solid $grayOutline
 
@@ -140,7 +140,9 @@
         width: 1px
 
   .messageWrapper
-    margin-left: 50px
+    padding-left: 50px
+    display: table-cell
+    vertical-align: middle
 
   .message
     font-size: 12px
@@ -174,8 +176,6 @@
     .body
       display: inline
       word-break: break-word
-      padding: 0px
-      margin: 0px
 
     .timestamp
       font-size: 10px

public/css/otalk.css

@@ -771,7 +771,7 @@ h3 {
   padding: 10px 0;
   width: 100%;
   min-height: 50px;
-  display: block;
+  display: table;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
@@ -802,7 +802,9 @@ h3 {
   width: 1px;
 }
 .messages .messageWrapper {
-  margin-left: 50px;
+  padding-left: 50px;
+  display: table-cell;
+  vertical-align: middle;
 }
 .messages .message {
   font-size: 12px;
@@ -836,8 +838,6 @@ h3 {
 .messages .message .body {
   display: inline;
   word-break: break-word;
-  padding: 0px;
-  margin: 0px;
 }
 .messages .message .timestamp {
   font-size: 10px;

public/x-manifest.cache

@@ -1,5 +1,5 @@
 CACHE MANIFEST
-# 0.0.1 1382535083157
+# 0.0.1 1382536313264
 
 CACHE:
 /app.js