3 files changed, 24 insertions, 20 deletions

diff --git a/vnext/src/components/Message.css b/vnext/src/components/Message.css
index 337a3dc0d..cd0c34ab3 100644
--- a/vnext/src/components/Message.css
+++ b/vnext/src/components/Message.css
@@ -27,7 +27,7 @@
     align-items: center;
     display: flex;
     flex-basis: 0;
-    flex-direction: column;
+    flex-direction: row;
     flex-grow: 1;
     padding-top: 12px;
 }
@@ -129,7 +129,9 @@ blockquote {
 .msg-recomms {
     color: #AAA;
     font-size: small;
-    margin-top: 10px;
+    margin-bottom: 10px;
+    padding-bottom: 6px;
+    border-bottom: 1px solid #eee;
     overflow: hidden;
     text-indent: 10px;
 }
diff --git a/vnext/src/components/Message.js b/vnext/src/components/Message.js
index 02371ddb8..f093221bb 100644
--- a/vnext/src/components/Message.js
+++ b/vnext/src/components/Message.js
@@ -6,6 +6,7 @@ import moment from 'moment';
 import { UserType, MessageType } from './Types';
 import Icon from './Icon';
 import Avatar from './Avatar';
+import { UserLink } from './UserInfo';
 
 import { format } from '../utils/embed';
 
@@ -15,6 +16,7 @@ function Message({ data, visitor, children, ...rest }) {
     const isCode = (data.tags || []).indexOf('code') >= 0;
     return (
         <div className="msg-cont">
+            <Recommendations forMessage={data} />
             <header className="h">
                 <Avatar user={data.user}>
                     <div className="msg-ts">
@@ -105,6 +107,24 @@ function Tags({ data, user, ...rest }) {
 
 const TagsList = React.memo(Tags);
 
+function Recommends({ forMessage, ...rest }) {
+    const { likes, recommendations } = forMessage;
+    return recommendations && recommendations.length > 0 && (
+        <div className="msg-recomms">{'❤️ by '}
+            {
+                recommendations.map(it => (
+                    <UserLink key={it.uri || it.uid} user={it} />
+                )).reduce((prev, curr) => [prev, ', ', curr])
+            }
+            {
+                likes > recommendations.length && (<span>&nbsp;and {likes - recommendations.length} others</span>)
+            }
+        </div>
+    ) || null;
+}
+
+const Recommendations = React.memo(Recommends);
+
 Message.propTypes = {
     data: MessageType,
     visitor: UserType.isRequired,
diff --git a/vnext/src/components/Thread.js b/vnext/src/components/Thread.js
index f94ad358d..6d8a5fd31 100644
--- a/vnext/src/components/Thread.js
+++ b/vnext/src/components/Thread.js
@@ -11,7 +11,6 @@ import MessageInput from './MessageInput';
 import Spinner from './Spinner';
 import Avatar from './Avatar';
 import Button from './Button';
-import { UserLink } from './UserInfo';
 
 import { format } from '../utils/embed';
 
@@ -85,7 +84,6 @@ export default class Thread extends React.Component {
           msg.mid ? (
             <Message data={msg} visitor={this.props.visitor}>
               {this.state.active === (msg.rid || 0) && <MessageInput data={msg} onSend={this.postComment}>Write a comment...</MessageInput>}
-              <Recommendations forMessage={msg} />
             </Message>
           ) : (
               <Spinner />
@@ -157,19 +155,3 @@ Thread.propTypes = {
   match: ReactRouterPropTypes.match,
   visitor: UserType.isRequired
 };
-
-function Recommendations({ forMessage, ...rest }) {
-  const { likes, recommendations } = forMessage;
-  return recommendations && recommendations.length > 0 && (
-    <div className="msg-recomms">{'Recommended by '}
-      {
-        recommendations.map(it => (
-          <UserLink key={it.uri || it.uid} user={it} />
-        )).reduce((prev, curr) => [prev, ', ', curr])
-      }
-      {
-        likes > recommendations.length && (<span>&nbsp;and {likes - recommendations.length} others</span>)
-      }
-    </div>
-  ) || null;
-}