Fixed comments design

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

1 files changed, 22 insertions, 24 deletions

diff --git a/apps/comments/css/comments.scss b/apps/comments/css/comments.scss
index 07653417d6c..45463acae81 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 {