Improve message design with CSS tables

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

@@ -23,34 +23,46 @@
 		overflow-x: hidden;
 		padding-left: 7px !important;
 		
-		.timsChatMessage {
+		ul {
-			padding-left: 16px;
+			display: table;
-			min-height: 16px;
+		
-			clear: both;
+			.timsChatMessage {
-			position: relative;
+				min-height: 16px;
-			
+				display: table-row;
-			time:first-child {
+				
+				time:first-child {
+					&::before {
+						content: "[";
+					}
+					&::after {
+						content: "]";
+					}
+				}
+				
+				.username {
+					font-weight: bold;
+				}
+				
+				> {
+					time, .usernameContainer, .text {
+						display: table-cell;
+					}
+					
+					.usernameContainer {
+						text-align: right;
+						min-width: 100px;
+						padding: 0px 5px;
+					}
+				}
+				
+				&.unloaded {
+					opacity: 0.4;
+				}
+				
 				&::before {
-					content: "[";
+					.icon;
+					.icon16;
 				}
-				&::after {
-					content: "]";
-				}
-			}
-			
-			.username {
-				font-weight: bold;
-			}
-			
-			&.unloaded {
-				opacity: 0.4;
-			}
-			
-			&::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}