fix: update comment input ui

Signed-off-by: Luka Trovic <luka@nextcloud.com>

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"

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