Uses Expandable only if the message exceeds 300 characters

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>
+          ) : (
+            <MarkdownPreview content={message} promptLinks />
+          )}
         </div>
       </div>
     </li>

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]);