Merge pull request #1549 from Automattic/fix/varia-issue-1409

Varia: Make sure long username not running into avatar

varia/sass/components/comments/_comments.scss

@@ -86,10 +86,15 @@
 	}
 
 	.comment-author {
+		line-height: #{map-deep-get($config-global, "font", "line-height", "heading")};
+		margin-bottom: #{.25 * map-deep-get($config-global, "spacing", "unit")};
+		padding-right: #{2.5 * map-deep-get($config-global, "spacing", "horizontal")};
 
 		@include media(mobile) {
 			display: flex;
 			align-items: center;
+			margin-bottom: 0;
+			padding-right: 0;
 		}
 
 		.avatar {
@@ -107,8 +112,12 @@
 	}
 
 	.comment-metadata {
-
 		color: #{map-deep-get($config-global, "color", "foreground", "default")};
+		padding-right: #{2.5 * map-deep-get($config-global, "spacing", "horizontal")};
+
+		@include media(mobile) {
+			padding-right: 0;
+		}
 
 		a {
 			color: currentColor;

varia/style-rtl.css

@@ -2969,10 +2969,18 @@ body:not(.fse-enabled) .footer-menu a {
 	}
 }
 
+.comment-meta .comment-author {
+	line-height: 1.125;
+	margin-bottom: 4px;
+	padding-left: 40px;
+}
+
 @media only screen and (min-width: 560px) {
 	.comment-meta .comment-author {
 		display: flex;
 		align-items: center;
+		margin-bottom: 0;
+		padding-left: 0;
 	}
 }
 
@@ -2993,6 +3001,13 @@ body:not(.fse-enabled) .footer-menu a {
 
 .comment-meta .comment-metadata {
 	color: #444444;
+	padding-left: 40px;
+}
+
+@media only screen and (min-width: 560px) {
+	.comment-meta .comment-metadata {
+		padding-left: 0;
+	}
 }
 
 .comment-meta .comment-metadata a {

varia/style.css

@@ -2986,10 +2986,18 @@ body:not(.fse-enabled) .footer-menu a {
 	}
 }
 
+.comment-meta .comment-author {
+	line-height: 1.125;
+	margin-bottom: 4px;
+	padding-right: 40px;
+}
+
 @media only screen and (min-width: 560px) {
 	.comment-meta .comment-author {
 		display: flex;
 		align-items: center;
+		margin-bottom: 0;
+		padding-right: 0;
 	}
 }
 
@@ -3010,6 +3018,13 @@ body:not(.fse-enabled) .footer-menu a {
 
 .comment-meta .comment-metadata {
 	color: #444444;
+	padding-right: 40px;
+}
+
+@media only screen and (min-width: 560px) {
+	.comment-meta .comment-metadata {
+		padding-right: 0;
+	}
 }
 
 .comment-meta .comment-metadata a {