src/ui/component/comment/view.jsx

@@ -1,25 +1,28 @@
 // @flow
 import React from 'react';
 import relativeDate from 'tiny-relative-date';
+import Button from 'component/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> */}

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}

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;
 }