From 062899c48354e541831476b868aa7f9cccb11705 Mon Sep 17 00:00:00 2001
From: jessop <jessop@lbry.com>
Date: Wed, 17 Jul 2019 16:56:36 -0400
Subject: [PATCH 1/2] improves comment display adds channel link adds support
 for newline better handles long channel names

---
 src/ui/component/comment/view.jsx      | 15 +++++++++------
 src/ui/component/commentsList/view.jsx |  1 +
 src/ui/scss/component/_comments.scss   | 25 +++++++++++++++++++++++++
 3 files changed, 35 insertions(+), 6 deletions(-)

diff --git a/src/ui/component/comment/view.jsx b/src/ui/component/comment/view.jsx
index 096f35642..d09cc3829 100644
--- a/src/ui/component/comment/view.jsx
+++ b/src/ui/component/comment/view.jsx
@@ -1,25 +1,28 @@
 // @flow
 import React from 'react';
 import relativeDate from 'tiny-relative-date';
+import Button from '../button';
 
 type Props = {
   author: string,
+  authorUri: string,
   message: string,
   timePosted: number,
 };
 
 function Comment(props: Props) {
-  const { author, timePosted, message } = props;
+  const { author, authorUri, timePosted, message } = props;
 
   return (
     <li className="comment">
-      <div className="comment__meta card__actions--between">
-        <strong>{author || __('Anonymous')}</strong>
-
-        <time dateTime={timePosted}>{relativeDate(timePosted)}</time>
+      <div className="comment__meta">
+        <Button className="button--uri-indicator truncated-text comment__author" navigate={authorUri} label={author} />
+        <time className="comment__time" dateTime={timePosted}>
+          {relativeDate(timePosted)}
+        </time>
       </div>
 
-      <p>{message}</p>
+      <p className={'comment__message'}>{message}</p>
       {/* The following is for adding threaded replies, upvoting and downvoting */}
       {/* <div className="comment__actions card__actions--between"> */}
       {/*  <button className={'button button--primary'}>Reply</button> */}
diff --git a/src/ui/component/commentsList/view.jsx b/src/ui/component/commentsList/view.jsx
index bc4cfbaa7..76fdfca23 100644
--- a/src/ui/component/commentsList/view.jsx
+++ b/src/ui/component/commentsList/view.jsx
@@ -21,6 +21,7 @@ function CommentList(props: Props) {
         comments.map(comment => {
           return (
             <Comment
+              authorUri={comment.channel_url}
               author={comment.channel_name}
               claimId={comment.channel_id}
               commentId={comment.comment_id}
diff --git a/src/ui/scss/component/_comments.scss b/src/ui/scss/component/_comments.scss
index 80f8f2ca8..b750a150f 100644
--- a/src/ui/scss/component/_comments.scss
+++ b/src/ui/scss/component/_comments.scss
@@ -12,6 +12,9 @@
       border-color: rgba($lbry-gray-5, 0.2);
     }
   }
+  display: flex;
+  flex-direction: column;
+  padding: 0;
 }
 
 // .comment__actions-wrap {
@@ -52,4 +55,26 @@
   time {
     opacity: 0.3;
   }
+  text-overflow: ellipsis;
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 1rem;
+}
+
+.comment__message {
+  white-space: pre-line;
+  margin-bottom: 1rem;
+}
+
+.comment__author {
+  margin-bottom: 1rem;
+  text-overflow: ellipsis; // This is where the magic happens
+  flex-basis: 400px;
+  flex-shrink: 1;
+  font-weight: 600;
+}
+
+.comment__time {
+  flex-basis: 200px;
+  text-align: right;
 }

From 050006ec73134b1765a378ca153b3f38d9e0eaa6 Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Sun, 21 Jul 2019 16:46:30 -0400
Subject: [PATCH 2/2] update import

---
 src/ui/component/comment/view.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/ui/component/comment/view.jsx b/src/ui/component/comment/view.jsx
index d09cc3829..5ab76b8cb 100644
--- a/src/ui/component/comment/view.jsx
+++ b/src/ui/component/comment/view.jsx
@@ -1,7 +1,7 @@
 // @flow
 import React from 'react';
 import relativeDate from 'tiny-relative-date';
-import Button from '../button';
+import Button from 'component/button';
 
 type Props = {
   author: string,