Fixing tribute positioning issue, moving recent comments to top.

ui/package.json

@@ -36,7 +36,7 @@
     "moment": "^2.24.0",
     "rxjs": "^6.4.0",
     "terser": "^3.17.0",
-    "tributejs": "^3.7.2",
+    "tributejs": "^3.7.3",
     "twemoji": "^12.1.2",
     "ws": "^7.0.0"
   },

ui/src/components/comment-form.tsx

@@ -6,7 +6,7 @@ import { WebSocketService, UserService } from '../services';
 import * as autosize from 'autosize';
 import { i18n } from '../i18next';
 import { T } from 'inferno-i18next';
-import Tribute from 'tributejs/src/Tribute.js';
+import * as Tribute from 'tributejs';
 import * as emojiShortName from 'emoji-short-name';
 
 interface CommentFormProps {
@@ -60,7 +60,7 @@ export class CommentForm extends Component<CommentFormProps, CommentFormState> {
           values: Object.entries(emojiShortName).map(e => {return {'key': e[1], 'val': e[0]}}),
           allowSpaces: false,
           autocompleteMode: true,
-          menuItemLimit: 10,
+          menuItemLimit: mentionDropdownFetchLimit,
         },
         // Users
         {
@@ -73,7 +73,7 @@ export class CommentForm extends Component<CommentFormProps, CommentFormState> {
           },
           allowSpaces: false,
           autocompleteMode: true,
-          menuItemLimit: 10,
+          menuItemLimit: mentionDropdownFetchLimit,
         },
 
         // Communities
@@ -87,7 +87,7 @@ export class CommentForm extends Component<CommentFormProps, CommentFormState> {
           },
           allowSpaces: false,
           autocompleteMode: true,
-          menuItemLimit: 10,
+          menuItemLimit: mentionDropdownFetchLimit,
         }
       ]
     });
@@ -123,7 +123,7 @@ export class CommentForm extends Component<CommentFormProps, CommentFormState> {
       <div class="mb-3">
         <form onSubmit={linkEvent(this, this.handleCommentSubmit)}>
           <div class="form-group row">
-            <div class="col-sm-12">
+            <div className={`col-sm-12`}>
               <textarea id={this.id} className={`form-control ${this.state.previewMode && 'd-none'}`} value={this.state.commentForm.content} onInput={linkEvent(this, this.handleCommentContentChange)} required disabled={this.props.disabled} rows={2} maxLength={10000} />
               {this.state.previewMode && 
                 <div className="md-div" dangerouslySetInnerHTML={mdToHtml(this.state.commentForm.content)} />

ui/src/components/post.tsx

@@ -140,8 +140,8 @@ export class Post extends Component<any, PostState> {
               {this.commentsTree()}
             </div>
             <div class="col-12 col-sm-12 col-md-4">
-              {this.sidebar()}
               {this.state.comments.length > 0 && this.newComments()}
+              {this.sidebar()}
             </div>
           </div>
         }
@@ -173,7 +173,7 @@ export class Post extends Component<any, PostState> {
 
   newComments() {
     return (
-      <div class="d-none d-md-block sticky-top new-comments card border-secondary">
+      <div class="d-none d-md-block new-comments mb-3 card border-secondary">
         <div class="card-body small">
           <h6><T i18nKey="recent_comments">#</T></h6>
           {this.state.comments.map(comment => 

ui/src/css/main.css

@@ -115,7 +115,7 @@ blockquote {
 }
 
 .new-comments {
-  max-height: 100vh;
+  max-height: 50vh;
   overflow: hidden;
 }
 

ui/src/css/tribute.css

@@ -1,3 +1,7 @@
+body {
+  position: relative;
+}
+
 .tribute-container {
   position: absolute;
   top: 0;