Improve message design with CSS tables

file/style/be.bastelstu.wcf.chat.less

@@ -23,11 +23,12 @@
 		overflow-x: hidden;
 		padding-left: 7px !important;
 		
+		ul {
+			display: table;
+		
 			.timsChatMessage {
-			padding-left: 16px;
 				min-height: 16px;
-			clear: both;
-			position: relative;
+				display: table-row;
 				
 				time:first-child {
 					&::before {
@@ -42,6 +43,18 @@
 					font-weight: bold;
 				}
 				
+				> {
+					time, .usernameContainer, .text {
+						display: table-cell;
+					}
+					
+					.usernameContainer {
+						text-align: right;
+						min-width: 100px;
+						padding: 0px 5px;
+					}
+				}
+				
 				&.unloaded {
 					opacity: 0.4;
 				}
@@ -49,8 +62,7 @@
 				&::before {
 					.icon;
 					.icon16;
-				position: absolute;
-				left: 0px;
+				}
 			}
 		}
 	}

template/chat.tpl

@@ -60,6 +60,10 @@
 	</script>
 	
 	<style type="text/css">
+		.timsChatMessage::before {
+			content: "";
+		}
+		
 		{assign var='type' value='\chat\data\message\Message::TYPE_'}
 		.timsChatMessage{$type|concat:'JOIN'|constant}::before {
 			content: "\f090";

template/message.tpl

@@ -1 +1 @@
-{literal}<time>{@$formattedTime}</time> <span class="username">{@$formattedUsername}</span><span class="separator">{$separator}</span> <span class="text">{@$formattedMessage}</span>{/literal}
+{literal}<time>{@$formattedTime}</time> <span class="usernameContainer"><span class="username">{@$formattedUsername}</span><span class="separator">{$separator}</span></span> <span class="text">{@$formattedMessage}</span>{/literal}