Fade out for long usernames.

client/css/style.css

@@ -911,6 +911,9 @@ kbd {
 	padding-right: 10px;
 	text-align: right;
 	width: 134px;
+	overflow: hidden;
+	white-space: nowrap;
+	position: relative;
 }
 
 #chat .text {
@@ -1810,6 +1813,25 @@ kbd {
 	font-style: italic;
 }
 
+@media (min-width: 480px) {
+	/* Fade out for long usernames */
+
+	#chat .from {
+		padding-left: 10px;
+	}
+
+	#chat .from:after {
+		position: absolute;
+		right: 0;
+		width: 10px;
+		height: 100%;
+		background: linear-gradient(to right, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, 1) 100%);
+		content: " ";
+	}
+
+	/* End fade out for long usernames */
+}
+
 @media (max-width: 768px) {
 	/**
 	  * TODO Replace this with `@media (hover: hover)` when Firefox supports it

client/themes/morning.css

@@ -253,3 +253,9 @@ body {
 }
 
 /* End form elements */
+
+@media (min-width: 480px) {
+	#chat .from:after {
+		background: linear-gradient(to right, rgba(51, 60, 74, .5) 0%, rgba(51, 60, 74, 1) 100%);
+	}
+}

client/themes/zenburn.css

@@ -279,3 +279,9 @@ body {
 }
 
 /* End form elements */
+
+@media (min-width: 480px) {
+	#chat .from:after {
+		background: linear-gradient(to right, rgba(63, 63, 63, .5) 0%, rgba(63, 63, 63, 1) 100%);
+	}
+}