From 9771b70c8fdd31d0f54d7515f64b832b8836c57e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julius=20H=C3=A4rtl?= <jus@bitgrid.net>
Date: Wed, 18 Jul 2018 20:28:02 +0200
Subject: [PATCH] Fix inline avatar display for mentions in comments
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Julius Härtl <jus@bitgrid.net>
---
 apps/comments/css/comments.scss     | 23 +++++++++++++++++++++--
 apps/comments/js/commentstabview.js |  6 +++++-
 2 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/apps/comments/css/comments.scss b/apps/comments/css/comments.scss
index ae1f6d7172..ffb6f04f53 100644
--- a/apps/comments/css/comments.scss
+++ b/apps/comments/css/comments.scss
@@ -155,8 +155,27 @@
 	cursor: pointer;
 }
 
-#commentsTabView .comments li .message .atwho-inserted {
-	margin-left: 5px;
+#commentsTabView .comments li .message .atwho-inserted,
+#commentsTabView .newCommentForm .atwho-inserted {
+	.avatar-name-wrapper {
+		display: inline;
+		vertical-align: top;
+		background-color: var(--color-background-dark);
+		border-radius: 50vh;
+		padding: 1px 7px 1px 1px;
+		.avatar {
+			img {
+				vertical-align: top;
+			}
+			height: 16px;
+			width: 16px;
+			vertical-align: middle;
+			padding: 1px;
+			margin-top: -3px;
+			margin-left: 0;
+			margin-right: 2px;
+		}
+	}
 }
 
 .atwho-view-ul * .avatar-name-wrapper {
diff --git a/apps/comments/js/commentstabview.js b/apps/comments/js/commentstabview.js
index 9477cb0c30..fc074b709a 100644
--- a/apps/comments/js/commentstabview.js
+++ b/apps/comments/js/commentstabview.js
@@ -383,7 +383,11 @@
 
 		_postRenderItem: function($el, editionMode) {
 			$el.find('.has-tooltip').tooltip();
-			$el.find('.avatar').each(function() {
+			$el.find('.avatar').each(function () {
+				var $this = $(this);
+				$this.avatar($this.attr('data-username'), 16);
+			});
+			$el.find('.authorRow .avatar').each(function () {
 				var $this = $(this);
 				$this.avatar($this.attr('data-username'), 32);
 			});