Add new css chat-msg-author as base class.

css/converse.css

@@ -512,7 +512,7 @@
     #conversejs .chatbox .chat-body .chat-info {
       color: #6C4C44;
       color: #808080;
-      margin: 0.2em 0; }
+      margin: 0.3em; }
       #conversejs .chatbox .chat-body .chat-info.chat-event {
         clear: left; }
       #conversejs .chatbox .chat-body .chat-info.chat-error {
@@ -520,29 +520,28 @@
         font-weight: bold; }
       #conversejs .chatbox .chat-body .chat-info.chat-date {
         display: inline-block;
-        padding-top: 10px; }
+        margin-top: 2em; }
     #conversejs .chatbox .chat-body .chat-message {
-      height: 1.5em;
-      padding: 0.2em 0; }
+      margin: 0.3em; }
       #conversejs .chatbox .chat-body .chat-message span {
-        max-width: 100px;
-        display: inline-block;
-        padding-right: 3px; }
-        #conversejs .chatbox .chat-body .chat-message span.chat-message-author {
+        display: inline-block; }
+        #conversejs .chatbox .chat-body .chat-message span.chat-msg-author {
+          max-width: 100px;
           font-weight: bold;
           white-space: nowrap;
           float: left;
           text-overflow: ellipsis;
           overflow: hidden; }
-        #conversejs .chatbox .chat-body .chat-message span.chat-message-them {
+        #conversejs .chatbox .chat-body .chat-message span.chat-msg-them {
           color: #346121; }
-        #conversejs .chatbox .chat-body .chat-message span.chat-message-me {
+        #conversejs .chatbox .chat-body .chat-message span.chat-msg-me {
           color: #436F64; }
-        #conversejs .chatbox .chat-body .chat-message span.chat-message-content {
+        #conversejs .chatbox .chat-body .chat-message span.chat-msg-content {
+          max-width: 100%;
           word-wrap: break-word; }
-    #conversejs .chatbox .chat-body .delayed .chat-message-them {
+    #conversejs .chatbox .chat-body .delayed .chat-msg-them {
       color: #FB5D50; }
-    #conversejs .chatbox .chat-body .delayed .chat-message-me {
+    #conversejs .chatbox .chat-body .delayed .chat-msg-me {
       color: #7EABBB; }
   #conversejs .chatbox .chat-content {
     position: relative;
@@ -1153,7 +1152,7 @@
           padding: 0.5em 0.5em 0 0.5em; }
       #conversejs .chatroom .box-flyout .chatroom-body .mentioned {
         font-weight: bold; }
-      #conversejs .chatroom .box-flyout .chatroom-body .chat-message-room {
+      #conversejs .chatroom .box-flyout .chatroom-body .chat-msg-room {
         color: #346121; }
       #conversejs .chatroom .box-flyout .chatroom-body .participants {
         display: table-cell;

mockup/index.html

@@ -298,7 +298,7 @@
                     <div class="chat-info"><strong>/help</strong>:This is an info message</div>
                     <div class="chat-info chat-error">This is an error message</div>
                     <div class="chat-message">
-                        <span class="chat-msg-me">09:35 me:&nbsp;</span>
+                        <span class="chat-msg-author chat-msg-me">09:35 me:&nbsp;</span>
                         <span class="chat-msg-content">
                             Hello world
                             <span class="icon-smiley"></span>
@@ -309,16 +309,16 @@
                         <span class="chat-msg-content">Dagsê</span>
                     </div>
                     <div class="chat-message">
-                        <span class="chat-msg-me">19:39 me:&nbsp;</span>
+                        <span class="chat-msg-author chat-msg-me">19:39 me:&nbsp;</span>
                         <span class="chat-msg-content">This is a relatively long message to check that wrapping works as expected.</span>
                     </div>
                     <div class="chat-message">
-                        <span class="chat-msg-me">19:42 me:&nbsp;</span>
+                        <span class="chat-msg-author chat-msg-me">19:42 me:&nbsp;</span>
                         <span class="chat-msg-content">Supercalifragilisticexpialidociousstillnotlongenough</span>
                     </div>
                     <div class="chat-info chat-event">JC Brand is busy</div>
                     <div class="chat-message ">
-                        <span class="chat-msg-me">19:43 me:&nbsp;</span>
+                        <span class="chat-msg-author chat-msg-me">19:43 me:&nbsp;</span>
                         <span class="chat-msg-content">Another message to check that scrolling works.</span>
                     </div>
                 </div>
@@ -374,26 +374,26 @@
                 <div class="chat-area">
                     <div class="chat-content">
                         <div class="chat-message ">
-                            <span class="chat-msg-room">18:50 luke:&nbsp;</span>
+                            <span class="chat-msg-author chat-msg-room">18:50 luke:&nbsp;</span>
                             <span class="chat-msg-content">leia: hi :)</span>
                         </div>
                         <div class="chat-message ">
-                            <span class="chat-msg-room">19:40 leia:&nbsp;</span>
+                            <span class="chat-msg-author chat-msg-room">19:40 leia:&nbsp;</span>
                             <span class="chat-msg-content">
                                 I'll be gone for a while, will be back in about an hour</span>
                         </div>
                         <time class="chat-info chat-date" datetime="2013-06-04T00:00:00.000Z">Tue Jun 04 2013</time>
                         <div class="chat-message ">
-                            <span class="chat-msg-room">19:40 Obi-wan Kenobi, Jedi Master:&nbsp;</span>
+                            <span class="chat-msg-author chat-msg-room">19:40 Obi-wan Kenobi, Jedi Master:&nbsp;</span>
                             <span class="chat-msg-content">
                                 I'll be gone for a while, will be back in about an hour</span>
                         </div>
                         <div class="chat-message">
-                            <span class="chat-msg-me">19:42 me:&nbsp;</span>
+                            <span class="chat-msg-author chat-msg-me">19:42 me:&nbsp;</span>
                             <span class="chat-msg-content">Supercalifragilisticexpialidociousstillnotlongenough</span>
                         </div>
                         <div class="chat-message ">
-                            <span class="chat-msg-room">19:43 Obi-wan Kenobi, Jedi Master:&nbsp;</span>
+                            <span class="chat-msg-author chat-msg-room">19:43 Obi-wan Kenobi, Jedi Master:&nbsp;</span>
                             <span class="chat-msg-content">Another message to check that scrolling works.</span>
                         </div>
                     </div>

sass/_chatbox.scss

@@ -68,7 +68,7 @@
             .chat-info {
                 color: $text-color;
                 color: #808080;
-                margin: 0.2em 0;
+                margin: 0.3em;
                 &.chat-event {
                     clear: left;
                 }
@@ -78,17 +78,15 @@
                 }
                 &.chat-date {
                     display: inline-block;
-                    padding-top: 10px;
+                    margin-top: 2em;
                 }
             }
             .chat-message {
-                height: 1.5em;
-                padding: 0.2em 0;
+                margin: 0.3em;
                 span {
-                    max-width: 100px;
                     display: inline-block;
-                    padding-right: 3px;
                     &.chat-msg-author {
+                        max-width: 100px;
                         font-weight: bold;
                         white-space: nowrap;
                         float: left;
@@ -102,6 +100,7 @@
                         color: $link-color;
                     }
                     &.chat-msg-content {
+                        max-width: 100%;
                         word-wrap: break-word;
                     }
                 }

src/templates/action.html

@@ -1,4 +1,4 @@
 <div class="chat-message {{extra_classes}}" data-isodate="{{isodate}}">
-    <span class="chat-msg-{{sender}}">{{time}} **{{username}} </span>
+    <span class="chat-msg-author chat-msg-{{sender}}">{{time}} **{{username}} </span>
     <span class="chat-msg-content">{{message}}</span>
 </div>

src/templates/message.html

@@ -1,4 +1,4 @@
 <div class="chat-message {{extra_classes}}" data-isodate="{{isodate}}" data-msgid="{{msgid}}">
-    <span class="chat-msg-{{sender}}">{{time}} {{username}}:&nbsp;</span>
+    <span class="chat-msg-author chat-msg-{{sender}}">{{time}} {{username}}:&nbsp;</span>
     <span class="chat-msg-content">{{message}}</span>
 </div>