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); });