From b80ec3fe96c364bd14a5149b2511a9ef4e46b12a Mon Sep 17 00:00:00 2001
From: Dessalines <tyhou13@gmx.com>
Date: Sun, 21 Apr 2019 16:44:47 -0700
Subject: [PATCH] Making chat / new comments section sticky top and fitting to
 your viewport

- Fixes #97. #98
---
 ui/src/components/comment-form.tsx | 2 +-
 ui/src/components/post.tsx         | 5 +++--
 ui/src/css/main.css                | 4 ++++
 3 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/ui/src/components/comment-form.tsx b/ui/src/components/comment-form.tsx
index df079ba3..1b4eda99 100644
--- a/ui/src/components/comment-form.tsx
+++ b/ui/src/components/comment-form.tsx
@@ -56,7 +56,7 @@ export class CommentForm extends Component<CommentFormProps, CommentFormState> {
         <form onSubmit={linkEvent(this, this.handleCommentSubmit)}>
           <div class="form-group row">
             <div class="col-sm-12">
-              <textarea class="form-control" value={this.state.commentForm.content} onInput={linkEvent(this, this.handleCommentContentChange)} placeholder="Comment here" required disabled={this.props.disabled}/>
+              <textarea class="form-control" value={this.state.commentForm.content} onInput={linkEvent(this, this.handleCommentContentChange)} required disabled={this.props.disabled} rows={2} />
             </div>
           </div>
           <div class="row">
diff --git a/ui/src/components/post.tsx b/ui/src/components/post.tsx
index 3ece6747..9f489466 100644
--- a/ui/src/components/post.tsx
+++ b/ui/src/components/post.tsx
@@ -130,8 +130,9 @@ export class Post extends Component<any, PostState> {
 
   newComments() {
     return (
-      <div class="sticky-top">
-        <h5>New Comments</h5>
+      <div class="container-fluid sticky-top new-comments">
+        <h5>Chat</h5>
+        <CommentForm postId={this.state.post.id} disabled={this.state.post.locked} />
         {this.state.comments.map(comment => 
           <CommentNodes 
             nodes={[{comment: comment}]} 
diff --git a/ui/src/css/main.css b/ui/src/css/main.css
index da118490..832149f4 100644
--- a/ui/src/css/main.css
+++ b/ui/src/css/main.css
@@ -87,3 +87,7 @@ blockquote {
   margin-top: 6px;
 }
 
+.new-comments {
+  max-height: 100vh;
+  overflow-y: auto;
+}
-- 
2.44.1