diff --git a/apps/comments/css/comments.scss b/apps/comments/css/comments.scss
index 75daeff875..e3e5a21032 100644
--- a/apps/comments/css/comments.scss
+++ b/apps/comments/css/comments.scss
@@ -130,7 +130,7 @@
 	 adding this brings them closer to the element**/
 	margin-top: 5px;
 }
-#commentsTabView .comments li .message .avatar-name-wrapper,
+
 .atwho-view-ul * .avatar-name-wrapper,
 #commentsTabView .comment .authorRow {
 	position: relative;
@@ -141,24 +141,34 @@
 
 #commentsTabView .comment:not(.newCommentRow) .message .avatar-name-wrapper:not(.currentUser),
 #commentsTabView .comment:not(.newCommentRow) .message .avatar-name-wrapper:not(.currentUser) .avatar,
+#commentsTabView .comment:not(.newCommentRow) .message .avatar-name-wrapper:not(.currentUser) .avatar img,
 #commentsTabView .comment .authorRow .avatar:not(.currentUser),
 #commentsTabView .comment .authorRow .author:not(.currentUser) {
 	cursor: pointer;
 }
 
 .atwho-view-ul .avatar-name-wrapper,
-.atwho-view-ul .avatar-name-wrapper .avatar {
+.atwho-view-ul .avatar-name-wrapper .avatar,
+.atwho-view-ul .avatar-name-wrapper .avatar img {
 	cursor: pointer;
 }
 
 #commentsTabView .comments li .message .atwho-inserted,
 #commentsTabView .newCommentForm .atwho-inserted {
 	.avatar-name-wrapper {
+		/* Make the wrapper the positioning context of its child contacts
+		 * menu. */
+		position: relative;
+
 		display: inline;
 		vertical-align: top;
 		background-color: var(--color-background-dark);
 		border-radius: 50vh;
 		padding: 1px 7px 1px 1px;
+
+		/* Ensure that the avatar and the user name will be kept together. */
+		white-space: nowrap;
+
 		.avatar {
 			img {
 				vertical-align: top;
@@ -171,6 +181,15 @@
 			margin-left: 0;
 			margin-right: 2px;
 		}
+		strong {
+			/* Ensure that the user name is shown in bold, as different browsers
+			 * use different font weights for strong elements. */
+			font-weight: bold;
+		}
+	}
+	.avatar-name-wrapper.currentUser {
+		background-color: var(--color-primary);
+		color: var(--color-primary-text);
 	}
 }
 
@@ -231,4 +250,4 @@
 
 .app-files .action-comment {
 	padding: 16px 14px;
-}
\ No newline at end of file
+}
diff --git a/apps/comments/js/commentstabview.js b/apps/comments/js/commentstabview.js
index 8b20bac571..3c428fe86a 100644
Binary files a/apps/comments/js/commentstabview.js and b/apps/comments/js/commentstabview.js differ
diff --git a/apps/comments/tests/js/commentstabviewSpec.js b/apps/comments/tests/js/commentstabviewSpec.js
index c90ad04e41..bd1353cc43 100644
--- a/apps/comments/tests/js/commentstabviewSpec.js
+++ b/apps/comments/tests/js/commentstabviewSpec.js
@@ -309,7 +309,7 @@ describe('OCA.Comments.CommentsTabView tests', function() {
 
 			expect(createStub.calledOnce).toEqual(false);
 			expect($newCommentForm.find('.message').html()).toContain('Mention to <span');
-			expect($newCommentForm.find('.message').html()).toContain('<div class="avatar"');
+			expect($newCommentForm.find('.message').html()).toContain('<span class="avatar"');
 			expect($newCommentForm.find('.message').html()).toContain('<strong>User Name</strong>');
 			expect($newCommentForm.find('.message').text()).not.toContain('@');
 			// In this case the default behaviour is prevented by the