From 53e4392feb3199778d4ce7f820a98a6e02795ff6 Mon Sep 17 00:00:00 2001
From: Oleg Silkin <o.silkin98@gmail.com>
Date: Thu, 24 Oct 2019 13:24:53 -0400
Subject: [PATCH] Comments are adjacent to the thumbnail

---
 ui/component/comment/view.jsx    | 39 ++++++++++++++-------------
 ui/scss/component/_comments.scss | 45 +++++++++++++-------------------
 2 files changed, 39 insertions(+), 45 deletions(-)

diff --git a/ui/component/comment/view.jsx b/ui/component/comment/view.jsx
index 84c1342d0..f955599f7 100644
--- a/ui/component/comment/view.jsx
+++ b/ui/component/comment/view.jsx
@@ -43,25 +43,28 @@ function Comment(props: Props) {
 
   return (
     <li className="comment">
-      <div className="comment__author">
-        <div className="comment__author-thumbnail">
-          {authorUri ? <ChannelThumbnail uri={authorUri} obscure={channelIsBlocked} /> : <ChannelThumbnail />}
-        </div>
-        <Button
-          className="button--uri-indicator truncated-text comment__author-name"
-          navigate={authorUri}
-          label={author || __('Anonymous')}
-        />
-        <time className="comment__time" dateTime={timePosted}>
-          {relativeDate(timePosted)}
-        </time>
+      <div className="comment__author-thumbnail">
+        {authorUri ? <ChannelThumbnail uri={authorUri} obscure={channelIsBlocked} /> : <ChannelThumbnail />}
       </div>
-      <div>
-        <Expandable>
-          <div className={'comment__message'}>
-            <MarkdownPreview content={message} />
-          </div>
-        </Expandable>
+
+      <div className="comment__body_container">
+        <span className="comment__meta">
+          <Button
+            className="button--uri-indicator truncated-text comment__author"
+            navigate={authorUri}
+            label={author || __('Anonymous')}
+          />
+          <time className="comment__time" dateTime={timePosted}>
+            {relativeDate(timePosted)}
+          </time>
+        </span>
+        <div>
+          <Expandable>
+            <div className="comment__message">
+              <MarkdownPreview content={message} promptLinks />
+            </div>
+          </Expandable>
+        </div>
       </div>
     </li>
   );
diff --git a/ui/scss/component/_comments.scss b/ui/scss/component/_comments.scss
index 6fe500b9d..10f6993e3 100644
--- a/ui/scss/component/_comments.scss
+++ b/ui/scss/component/_comments.scss
@@ -3,26 +3,27 @@
 }
 
 .comment {
+  font-size: var(--font-multiplier-small);
+  padding: var(--spacing-small) 0;
+  flex-direction: row;
   display: flex;
-  flex-direction: column;
-  font-size: var(--font-small);
-  padding: var(--spacing-small) 0 var(--spacing-small);
-
-  &:first-of-type {
-    padding-top: 0;
-  }
+  &:not(:last-of-type) {
+    border-bottom: 1px solid var(--lbry-gray-1);
 
   &:not(:last-of-type) {
     border-bottom: 1px solid var(--color-border);
   }
 }
 
-.comment__meta {
-  text-overflow: ellipsis;
-  display: flex;
-  justify-content: space-between;
-  margin-bottom: var(--spacing-small);
+.comment__body_container {
+  padding: var(--spacing-small) 0;
+}
 
+.comment__meta {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  text-overflow: ellipsis;
   time {
     opacity: 0.3;
   }
@@ -33,31 +34,21 @@
 }
 
 .comment__author {
-  display: inherit;
-  justify-content: left;
-  vertical-align: center;
-  flex: initial;
-  padding-bottom: inherit;
-}
-
-.comment__author-thumbnail {
-  flex-shrink: 1;
-}
-
-.comment__author-name {
   margin-bottom: 1rem;
   text-overflow: ellipsis; // This is where the magic happens
   flex-basis: 400px;
   flex-shrink: 1;
   font-weight: 600;
-  font-size: medium;
+}
+
+.comment__author-thumbnail {
+  display: inline-block;
 }
 
 .comment__time {
-  flex: 1;
-  align-self: flex-start;
   flex-basis: 200px;
   text-align: right;
+  justify-content: flex-end;
 }
 
 .comment__char-count {