From 26ae67702d81dd0038917d0405998670cf66d7cf Mon Sep 17 00:00:00 2001
From: Oleg Silkin <o.silkin98@gmail.com>
Date: Wed, 27 Nov 2019 16:08:43 -0500
Subject: [PATCH] Uses `Expandable` only if the message exceeds 300 characters

---
 ui/component/comment/view.jsx      | 13 ++++++++-----
 ui/component/commentsList/view.jsx |  1 -
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/ui/component/comment/view.jsx b/ui/component/comment/view.jsx
index f955599f7..d81498b9c 100644
--- a/ui/component/comment/view.jsx
+++ b/ui/component/comment/view.jsx
@@ -19,6 +19,8 @@ type Props = {
   channelIsBlocked: boolean,
 };
 
+const LENGTH_TO_COLLAPSE = 300;
+
 function Comment(props: Props) {
   const {
     author,
@@ -40,7 +42,6 @@ function Comment(props: Props) {
       resolveUri(authorUri);
     }
   }, [isResolvingUri, shouldFetch, author, authorUri, resolveUri]);
-
   return (
     <li className="comment">
       <div className="comment__author-thumbnail">
@@ -59,11 +60,13 @@ function Comment(props: Props) {
           </time>
         </span>
         <div>
-          <Expandable>
-            <div className="comment__message">
+          {message.length >= LENGTH_TO_COLLAPSE ? (
+            <Expandable className="comment__message">
               <MarkdownPreview content={message} promptLinks />
-            </div>
-          </Expandable>
+            </Expandable>
+          ) : (
+            <MarkdownPreview content={message} promptLinks />
+          )}
         </div>
       </div>
     </li>
diff --git a/ui/component/commentsList/view.jsx b/ui/component/commentsList/view.jsx
index 76fdfca23..d01aa133e 100644
--- a/ui/component/commentsList/view.jsx
+++ b/ui/component/commentsList/view.jsx
@@ -10,7 +10,6 @@ type Props = {
 
 function CommentList(props: Props) {
   const { fetchComments, uri, comments } = props;
-
   useEffect(() => {
     fetchComments(uri);
   }, [fetchComments, uri]);