diff --git a/frontend/lib/main.ts b/frontend/lib/main.ts index e9b75614..bf5bf77f 100644 --- a/frontend/lib/main.ts +++ b/frontend/lib/main.ts @@ -671,7 +671,10 @@ const _renderComments = (comments: Comment[]) => { const commenter = commentEl.querySelector( ".comment_commenter", )! as HTMLAnchorElement; - commenter.textContent = comment.commenter.name; + if (comment.commenter.name) { + commenter.textContent = comment.commenter.name; + commenter.title = comment.commenter.name; + } const userAvatar = commentEl.querySelector( ".comment_user_avatar", diff --git a/frontend/lib/style.css b/frontend/lib/style.css index 7d19556c..1452b492 100644 --- a/frontend/lib/style.css +++ b/frontend/lib/style.css @@ -331,10 +331,10 @@ } & .comment_header { - display: flex; + display: grid; align-items: center; - flex-wrap: wrap; + grid-template-columns: fit-content(40%) max-content auto; gap: 3px 10px; @@ -342,6 +342,12 @@ user-select: none; + & .comment_commenter { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + & .comment_time { overflow: hidden; text-overflow: ellipsis; @@ -349,6 +355,14 @@ color: var(--review-secondary-text-color); } + + & .comment_actions { + display: none; + } + + &:hover .comment_actions { + display: flex; + } } & .comment.comment_pending {