From 386131774dd16e33983fab251c5b75af14edc94f Mon Sep 17 00:00:00 2001
From: Luka Trovic <luka@nextcloud.com>
Date: Fri, 25 Mar 2022 14:20:09 +0100
Subject: [PATCH] fix: update comment input ui

Signed-off-by: Luka Trovic <luka@nextcloud.com>
---
 .../card/CardSidebarTabComments.vue           | 23 ++++++++-----------
 src/css/comments.scss                         | 14 +++++++++++
 2 files changed, 24 insertions(+), 13 deletions(-)

diff --git a/src/components/card/CardSidebarTabComments.vue b/src/components/card/CardSidebarTabComments.vue
index bcb163774..f639a9c7a 100644
--- a/src/components/card/CardSidebarTabComments.vue
+++ b/src/components/card/CardSidebarTabComments.vue
@@ -1,19 +1,16 @@
 <template>
 	<div>
-		<div class="comment--header">
-			<Avatar :user="currentUser.uid" />
-			<span class="has-tooltip username">
-				{{ currentUser.displayName }}
-			</span>
+		<div class="comment-wrapper">
+			<div class="comment--header">
+				<Avatar :user="currentUser.uid" />
+			</div>
+			<CommentItem v-if="replyTo"
+				:comment="replyTo"
+				:reply="true"
+				:preview="true"
+				@cancel="cancelReply" />
+			<CommentForm v-model="newComment" @submit="createComment" />
 		</div>
-
-		<CommentItem v-if="replyTo"
-			:comment="replyTo"
-			:reply="true"
-			:preview="true"
-			@cancel="cancelReply" />
-		<CommentForm v-model="newComment" @submit="createComment" />
-
 		<ul v-if="getCommentsForCard(card.id).length > 0" id="commentsFeed">
 			<CommentItem v-for="comment in getCommentsForCard(card.id)"
 				:key="comment.id"
diff --git a/src/css/comments.scss b/src/css/comments.scss
index f2fa497a2..44ca00503 100644
--- a/src/css/comments.scss
+++ b/src/css/comments.scss
@@ -34,6 +34,7 @@
 	display: flex;
 	align-items: center;
 	color: var(--color-text-light);
+	margin-right: 10px;
 
 	.username {
 		padding: 10px;
@@ -50,3 +51,16 @@
 	margin-left: 44px;
 	word-break: break-word;
 }
+
+.comment-wrapper {
+	display: flex;
+	align-items: center;
+}
+
+.comment-form {
+	width: 100%;
+}
+
+.comment-form .comment-form__contenteditable {
+	border-radius: 4px;
+}
\ No newline at end of file