Proper name overflowing solution.

labs/meteor-client/client/stylesheets/chat.less

@@ -8,6 +8,7 @@
     border: 1px solid #ccc;
     float: left;
     min-height:500px;
+    min-width:300px;
     overflow: hidden;
     width: 25%;
 }

labs/meteor-client/client/stylesheets/users.less

@@ -1,24 +1,25 @@
 #users {
 	margin-left: 0.5%;
+	min-width:230px;
 	padding-bottom: 10px;
 	width: 12%;
- }
+}
 #user-contents {
 	padding-bottom: 10px;
 	height:95%;
- }
- .userNameEntry{
-	height:20px; 
-	overflow:hidden;
-	width:90px; 
-    word-break:break-all;
-    padding:0px;
- }
+}
+.userNameEntry{
+	height:20px;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	width: 90px;
+}
 .user-entry tr:nth-child(even) {background-color: rgb(245,245,245);}
 .user-entry tr:hover {font-weight: bold;}
 .userListSettingIcon {}
 
 .userNameContainer{
-    border-right: 1px solid #ccc;
-    padding-right:0px;
-}
+	border-right: 1px solid #ccc;
+	padding-right:0px;
+}

labs/meteor-client/client/views/chat/chat_bar.html

@@ -35,8 +35,20 @@
 
 <!-- Displays and styles an individual message in the chat -->
 <template name="message">
-	<strong>{{message.from_username}}</strong> 
-	<small class="pull-right">{{toClockTime message.from_time}} {{#if message.from_time}}<span class="glyphicon glyphicon-time"></span>{{/if}}</small>
+	<table style="width:100%">
+		<tr>
+			<td>
+				{{#if message.from_username}}
+					<div class="userNameEntry" rel="tooltip" data-placement="bottom" title="{{message.from_username}}">
+						<strong>{{message.from_username}}</strong>
+					</div>
+				{{/if}}
+			</td>
+			<td style="text-align:right">
+				{{#if message.from_time}}<small class="pull-right">{{toClockTime message.from_time}} <span class="glyphicon glyphicon-time"></span></small>{{/if}}
+			</td>
+		</tr>
+	</table>
 	<div>{{{toClickable message.message}}}</div> <!-- Messages must be safely filtered and stripped -->
 </template>