From b7317a35e72b36ad06f05dc99b5f9947ac76b292 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?=
 <skjnldsv@protonmail.com>
Date: Sat, 21 Jul 2018 18:10:41 +0200
Subject: [PATCH 1/2] Focus the comment input on tab select/loading
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
---
 apps/comments/js/commentstabview.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/apps/comments/js/commentstabview.js b/apps/comments/js/commentstabview.js
index fc074b709ad59..c3903674e84dc 100644
--- a/apps/comments/js/commentstabview.js
+++ b/apps/comments/js/commentstabview.js
@@ -172,6 +172,7 @@
 			this.$el.find('.message').on('keydown input change', this._onTypeComment);
 
 			autosize(this.$el.find('.newCommentRow .message'))
+			this.$el.find('.newCommentForm .message').focus();	
 		},
 
 		_initAutoComplete: function($target) {
@@ -303,6 +304,8 @@
 					}
 				);
 			}
+			this.$el.find('.newCommentForm .message').focus();	
+			
 		},
 
 		/**

From 52af49ead5f13ac5c98bc84571aa99eed73d4b12 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?=
 <skjnldsv@protonmail.com>
Date: Sat, 21 Jul 2018 18:26:09 +0200
Subject: [PATCH 2/2] Fixed comments design
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
---
 apps/comments/css/comments.scss | 46 ++++++++++++++++-----------------
 1 file changed, 22 insertions(+), 24 deletions(-)

diff --git a/apps/comments/css/comments.scss b/apps/comments/css/comments.scss
index 07653417d6c73..45463acae8119 100644
--- a/apps/comments/css/comments.scss
+++ b/apps/comments/css/comments.scss
@@ -14,39 +14,37 @@
 
 #commentsTabView .newCommentForm {
 	margin-left: 36px;
+	position: relative;
 }
 
 #commentsTabView .newCommentForm .message {
-	/* width = 100% - (width of submit button (44px) + margin (3px) + border (1px)) */
-	width: calc(100% - 48px);
-	/* Need to use float left instead of display inline-block because Safari shows a big cursor */
-	float: left;
-	/* To align it to the button on the side */
-	margin-top: 5px;
+	width: 100%;
+	padding: 10px;
+	min-height: 44px;
+	margin: 0;
 }
 
-#commentsTabView .newCommentForm .submit {
-	width: 44px;
-	margin: 0;
-	padding: 13px;
-	background-color: transparent;
-	border: none;
-	opacity: .3;
-	vertical-align: bottom;
+#commentsTabView .newCommentForm {
+	.submit,
+	.submitLoading {
+		width: 44px;
+		height: 44px;
+		margin: 0;
+		padding: 13px;
+		background-color: transparent;
+		border: none;
+		opacity: .3;
+		position: absolute;
+		bottom: 0;
+		right: 0;
+	}
 }
 
 #commentsTabView .deleteLoading {
-	float: right;
 	padding: 14px;
 	vertical-align: middle;
 }
 
-#commentsTabView .submitLoading {
-	vertical-align: bottom;
-	display: inline-block;
-	padding: 14px;
-}
-
 #commentsTabView .newCommentForm .submit:not(:disabled):hover,
 #commentsTabView .newCommentForm .submit:not(:disabled):focus {
 	opacity: 1;
@@ -65,9 +63,6 @@
 	position: relative;
 	/** padding bottom is little more so that the top and bottom gap look uniform **/
 	padding: 10px 0px 15px;
-	word-wrap: break-word;
-	overflow-wrap: break-word;
-	overflow: hidden;
 }
 
 #commentsTabView .comments .comment {
@@ -201,6 +196,9 @@
 
 #commentsTabView .comments > li:not(.newCommentRow) .message {
 	padding-left: 40px;
+	word-wrap: break-word;
+	overflow-wrap: break-word;
+	overflow: hidden;
 }
 
 #commentsTabView .comment .action {