Merge pull request #1564 from Automattic/fix/varia-issue-1505

Varia, Rockfield: Prevent long usernames from overlapping.

rockfield/style-rtl.css

@@ -3007,16 +3007,11 @@ body:not(.fse-enabled) .footer-menu a {
 	margin-left: calc( $avatar-size + (0.5 * 16px));
 }
 
-@media only screen and (min-width: 560px) {
-	.comment-meta {
-		margin-left: inherit;
-	}
-}
-
 .comment-meta .comment-author {
 	line-height: 1.125;
 	margin-bottom: 4px;
 	padding-left: 40px;
+  max-width: calc(100% - 48px);
 }
 
 @media only screen and (min-width: 560px) {
@@ -3028,21 +3023,18 @@ body:not(.fse-enabled) .footer-menu a {
 	}
 }
 
+.comment-meta .comment-author .fn {
+	word-wrap: break-word;
+	word-break: break-word;
+	hyphens: auto;
+}
+
 .comment-meta .comment-author .avatar {
 	display: block;
 	position: absolute;
 	left: 0;
 }
 
-@media only screen and (min-width: 560px) {
-	.comment-meta .comment-author .avatar {
-		margin-left: 16px;
-		display: inherit;
-		position: inherit;
-		left: inherit;
-	}
-}
-
 .comment-meta .comment-metadata {
 	color: #444444;
 	padding-left: 40px;
@@ -3064,10 +3056,29 @@ body:not(.fse-enabled) .footer-menu a {
 
 @media only screen and (min-width: 560px) {
 	.comment-meta {
+		margin-left: inherit;
 		align-items: center;
 		display: flex;
 		justify-content: space-between;
 	}
+	.comment-meta .comment-author {
+		display: flex;
+		align-items: center;
+		max-width: inherit;
+		flex: 0 1 auto;
+	}
+	.comment-meta .comment-author .fn {
+		padding-left: 16px;
+	}
+	.comment-meta .comment-author .avatar {
+		margin-left: 16px;
+		display: inherit;
+		position: inherit;
+		left: inherit;
+	}
+	.comment-meta .comment-metadata {
+		flex: 0 1 auto;
+	}
 }
 
 .comment-metadata,

rockfield/style.css

@@ -3024,16 +3024,11 @@ body:not(.fse-enabled) .footer-menu a {
 	margin-right: calc( $avatar-size + (0.5 * 16px));
 }
 
-@media only screen and (min-width: 560px) {
-	.comment-meta {
-		margin-right: inherit;
-	}
-}
-
 .comment-meta .comment-author {
 	line-height: 1.125;
 	margin-bottom: 4px;
 	padding-right: 40px;
+  max-width: calc(100% - 48px);
 }
 
 @media only screen and (min-width: 560px) {
@@ -3045,21 +3040,18 @@ body:not(.fse-enabled) .footer-menu a {
 	}
 }
 
+.comment-meta .comment-author .fn {
+	word-wrap: break-word;
+	word-break: break-word;
+	hyphens: auto;
+}
+
 .comment-meta .comment-author .avatar {
 	display: block;
 	position: absolute;
 	right: 0;
 }
 
-@media only screen and (min-width: 560px) {
-	.comment-meta .comment-author .avatar {
-		margin-right: 16px;
-		display: inherit;
-		position: inherit;
-		right: inherit;
-	}
-}
-
 .comment-meta .comment-metadata {
 	color: #444444;
 	padding-right: 40px;
@@ -3081,10 +3073,29 @@ body:not(.fse-enabled) .footer-menu a {
 
 @media only screen and (min-width: 560px) {
 	.comment-meta {
+		margin-right: inherit;
 		align-items: center;
 		display: flex;
 		justify-content: space-between;
 	}
+	.comment-meta .comment-author {
+		display: flex;
+		align-items: center;
+		max-width: inherit;
+		flex: 0 1 auto;
+	}
+	.comment-meta .comment-author .fn {
+		padding-right: 16px;
+	}
+	.comment-meta .comment-author .avatar {
+		margin-right: 16px;
+		display: inherit;
+		position: inherit;
+		right: inherit;
+	}
+	.comment-meta .comment-metadata {
+		flex: 0 1 auto;
+	}
 }
 
 .comment-metadata,

varia/sass/components/comments/_comments.scss

@@ -81,14 +81,11 @@
 
 	margin-right: calc( $avatar-size + (0.5 * #{map-deep-get($config-global, "spacing", "horizontal")}) );
 
-	@include media(mobile) {
-		margin-right: inherit;
-	}
-
 	.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")};
+		max-width: calc(100% - #{3 * map-deep-get($config-global, "spacing", "horizontal")});
 
 		@include media(mobile) {
 			display: flex;
@@ -96,18 +93,17 @@
 			margin-bottom: 0;
 			padding-right: 0;
 		}
+    
+    .fn {
+			word-wrap: break-word;
+			word-break: break-word;
+			hyphens: auto;
+    }
 
 		.avatar {
 			display: block;
 			position: absolute;
 			right: 0;
-
-			@include media(mobile) {
-				margin-right: #{map-deep-get($config-global, "spacing", "horizontal")};
-				display: inherit;
-				position: inherit;
-				right: inherit;
-			}
 		}
 	}
 
@@ -130,9 +126,32 @@
 	}
 
 	@include media(mobile) {
+		margin-right: inherit;
 		align-items: center;
 		display: flex;
 		justify-content: space-between;
+
+		.comment-author {
+			display: flex;
+			align-items: center;
+			max-width: inherit;
+			flex: 0 1 auto;
+
+			.fn {
+				padding-right: #{map-deep-get($config-global, "spacing", "horizontal")};
+			}
+
+			.avatar {
+				margin-right: #{map-deep-get($config-global, "spacing", "horizontal")};
+				display: inherit;
+				position: inherit;
+				right: inherit;
+			}
+		}
+
+		.comment-metadata {
+			flex: 0 1 auto;
+		}
 	}
 }
 

varia/style-rtl.css

@@ -2966,16 +2966,11 @@ body:not(.fse-enabled) .footer-menu a {
 	margin-left: calc( $avatar-size + (0.5 * 16px));
 }
 
-@media only screen and (min-width: 560px) {
-	.comment-meta {
-		margin-left: inherit;
-	}
-}
-
 .comment-meta .comment-author {
 	line-height: 1.125;
 	margin-bottom: 4px;
 	padding-left: 40px;
+  max-width: calc(100% - 48px);
 }
 
 @media only screen and (min-width: 560px) {
@@ -2987,21 +2982,18 @@ body:not(.fse-enabled) .footer-menu a {
 	}
 }
 
+.comment-meta .comment-author .fn {
+	word-wrap: break-word;
+	word-break: break-word;
+	hyphens: auto;
+}
+
 .comment-meta .comment-author .avatar {
 	display: block;
 	position: absolute;
 	left: 0;
 }
 
-@media only screen and (min-width: 560px) {
-	.comment-meta .comment-author .avatar {
-		margin-left: 16px;
-		display: inherit;
-		position: inherit;
-		left: inherit;
-	}
-}
-
 .comment-meta .comment-metadata {
 	color: #444444;
 	padding-left: 40px;
@@ -3023,10 +3015,29 @@ body:not(.fse-enabled) .footer-menu a {
 
 @media only screen and (min-width: 560px) {
 	.comment-meta {
+		margin-left: inherit;
 		align-items: center;
 		display: flex;
 		justify-content: space-between;
 	}
+	.comment-meta .comment-author {
+		display: flex;
+		align-items: center;
+		max-width: inherit;
+		flex: 0 1 auto;
+	}
+	.comment-meta .comment-author .fn {
+		padding-left: 16px;
+	}
+	.comment-meta .comment-author .avatar {
+		margin-left: 16px;
+		display: inherit;
+		position: inherit;
+		left: inherit;
+	}
+	.comment-meta .comment-metadata {
+		flex: 0 1 auto;
+	}
 }
 
 .comment-metadata,

varia/style.css

@@ -2983,16 +2983,11 @@ body:not(.fse-enabled) .footer-menu a {
 	margin-right: calc( $avatar-size + (0.5 * 16px));
 }
 
-@media only screen and (min-width: 560px) {
-	.comment-meta {
-		margin-right: inherit;
-	}
-}
-
 .comment-meta .comment-author {
 	line-height: 1.125;
 	margin-bottom: 4px;
 	padding-right: 40px;
+  max-width: calc(100% - 48px);
 }
 
 @media only screen and (min-width: 560px) {
@@ -3004,21 +2999,18 @@ body:not(.fse-enabled) .footer-menu a {
 	}
 }
 
+.comment-meta .comment-author .fn {
+	word-wrap: break-word;
+	word-break: break-word;
+	hyphens: auto;
+}
+
 .comment-meta .comment-author .avatar {
 	display: block;
 	position: absolute;
 	right: 0;
 }
 
-@media only screen and (min-width: 560px) {
-	.comment-meta .comment-author .avatar {
-		margin-right: 16px;
-		display: inherit;
-		position: inherit;
-		right: inherit;
-	}
-}
-
 .comment-meta .comment-metadata {
 	color: #444444;
 	padding-right: 40px;
@@ -3040,10 +3032,29 @@ body:not(.fse-enabled) .footer-menu a {
 
 @media only screen and (min-width: 560px) {
 	.comment-meta {
+		margin-right: inherit;
 		align-items: center;
 		display: flex;
 		justify-content: space-between;
 	}
+	.comment-meta .comment-author {
+		display: flex;
+		align-items: center;
+		max-width: inherit;
+		flex: 0 1 auto;
+	}
+	.comment-meta .comment-author .fn {
+		padding-right: 16px;
+	}
+	.comment-meta .comment-author .avatar {
+		margin-right: 16px;
+		display: inherit;
+		position: inherit;
+		right: inherit;
+	}
+	.comment-meta .comment-metadata {
+		flex: 0 1 auto;
+	}
 }
 
 .comment-metadata,