From ce9ee0a5b0428c5f6da15639243d8e2fbb07389a Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Fri, 1 Dec 2017 15:28:09 -0300
Subject: [PATCH 1/6] Adding styles for mob devs

---
 .../src/tabs/stream/components/Comment.css    | 22 +++++++++++++++++--
 client/coral-embed-stream/style/default.css   |  1 -
 .../client/components/SubscriberBadge.css     |  1 -
 postcss.config.js                             |  8 +++----
 4 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/client/coral-embed-stream/src/tabs/stream/components/Comment.css b/client/coral-embed-stream/src/tabs/stream/components/Comment.css
index f5bead3b8..d104b4731 100644
--- a/client/coral-embed-stream/src/tabs/stream/components/Comment.css
+++ b/client/coral-embed-stream/src/tabs/stream/components/Comment.css
@@ -152,9 +152,27 @@
 }
 
 .header {
-  display: flex;
-  align-items: center;
   margin: 10px 0;
+  flex-direction: column;
+  align-items: flex-start;
+
+  > * {
+    margin: 3px 0;
+
+    &:first-child {
+      margin-left: 0;
+    }
+  }
+
+  @media (min-width: 480px) {
+    display: flex;
+    align-items: center;
+    flex-direction: row;
+
+    > div {
+      margin: 0px 5px;
+    }
+  }
 }
 
 .content {
diff --git a/client/coral-embed-stream/style/default.css b/client/coral-embed-stream/style/default.css
index 63f1edf67..451b27289 100644
--- a/client/coral-embed-stream/style/default.css
+++ b/client/coral-embed-stream/style/default.css
@@ -190,7 +190,6 @@ body {
   background-color: #4C1066;
   color: white;
   display: inline-block;
-  margin: 0px 5px;
   padding: 5px 5px;
   border-radius: 2px;
   font-size: 12px;
diff --git a/plugins/talk-plugin-subscriber/client/components/SubscriberBadge.css b/plugins/talk-plugin-subscriber/client/components/SubscriberBadge.css
index 42edfd8ff..e6c8d9161 100644
--- a/plugins/talk-plugin-subscriber/client/components/SubscriberBadge.css
+++ b/plugins/talk-plugin-subscriber/client/components/SubscriberBadge.css
@@ -2,7 +2,6 @@
   background-color: #616161;
   color: white;
   display: inline-block;
-  margin: 0px 5px;
   padding: 5px 5px;
   border-radius: 2px;
   font-size: 12px;
diff --git a/postcss.config.js b/postcss.config.js
index 79fae36cb..e76e674d2 100644
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -1,7 +1,7 @@
 module.exports = {
   plugins: [
-    require('postcss-smart-import')({ /* ...options */ }),
-    require('precss')({ /* ...options */ }),
-    require('autoprefixer')({ /* ...options */ })
-  ]
+    require('postcss-smart-import'),
+    require('precss'),
+    require('autoprefixer'),
+  ],
 };

From 67a4d63a23b231da6ae821fb23a0475e1c2277da Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Fri, 1 Dec 2017 15:31:05 -0300
Subject: [PATCH 2/6] Good margin

---
 .../src/tabs/stream/components/Comment.css                | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/client/coral-embed-stream/src/tabs/stream/components/Comment.css b/client/coral-embed-stream/src/tabs/stream/components/Comment.css
index d104b4731..d1a118c77 100644
--- a/client/coral-embed-stream/src/tabs/stream/components/Comment.css
+++ b/client/coral-embed-stream/src/tabs/stream/components/Comment.css
@@ -158,10 +158,6 @@
 
   > * {
     margin: 3px 0;
-
-    &:first-child {
-      margin-left: 0;
-    }
   }
 
   @media (min-width: 480px) {
@@ -169,8 +165,8 @@
     align-items: center;
     flex-direction: row;
 
-    > div {
-      margin: 0px 5px;
+    > * {
+      margin: 0 3px 0 0;
     }
   }
 }

From 7731ec42de6511c4b2655192b1d3dc3506f413df Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Fri, 1 Dec 2017 23:43:19 -0300
Subject: [PATCH 3/6] css tag label

---
 client/coral-embed-stream/style/default.css | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/client/coral-embed-stream/style/default.css b/client/coral-embed-stream/style/default.css
index 451b27289..154bfc868 100644
--- a/client/coral-embed-stream/style/default.css
+++ b/client/coral-embed-stream/style/default.css
@@ -190,10 +190,9 @@ body {
   background-color: #4C1066;
   color: white;
   display: inline-block;
-  padding: 5px 5px;
   border-radius: 2px;
   font-size: 12px;
-  font-weight: bold;
+  padding: 2px 6px;
 }
 
 /* Comment Action Styles */

From 6da4439b9421591375c15597f947ee4f7b7806bd Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Sat, 2 Dec 2017 00:20:59 -0300
Subject: [PATCH 4/6] Adding header container

---
 .../src/tabs/stream/components/Comment.css    | 10 +++-
 .../src/tabs/stream/components/Comment.js     | 60 ++++++++++---------
 2 files changed, 38 insertions(+), 32 deletions(-)

diff --git a/client/coral-embed-stream/src/tabs/stream/components/Comment.css b/client/coral-embed-stream/src/tabs/stream/components/Comment.css
index d1a118c77..8bdeeaaa4 100644
--- a/client/coral-embed-stream/src/tabs/stream/components/Comment.css
+++ b/client/coral-embed-stream/src/tabs/stream/components/Comment.css
@@ -119,6 +119,8 @@
 
 .commentInfoBar {
   margin-left: auto;
+  flex: 1;
+  text-align: right;
 }
 
 @keyframes enter {
@@ -131,9 +133,6 @@
   animation: enter 1000ms;
 }
 
-.commentContainer {
-}
-
 .commentAvatar {
   max-width: 60px;
 }
@@ -153,6 +152,11 @@
 
 .header {
   margin: 10px 0;
+  display: flex;
+}
+
+.headerContainer {
+  flex: 1;
   flex-direction: column;
   align-items: flex-start;
 
diff --git a/client/coral-embed-stream/src/tabs/stream/components/Comment.js b/client/coral-embed-stream/src/tabs/stream/components/Comment.js
index 3da59afdc..d66bebd75 100644
--- a/client/coral-embed-stream/src/tabs/stream/components/Comment.js
+++ b/client/coral-embed-stream/src/tabs/stream/components/Comment.js
@@ -452,39 +452,41 @@ export default class Comment extends React.Component {
           <div className={cn(styles.commentContainer, 'talk-stream-comment-container')}>
             <div className={cn(styles.header, 'talk-stream-comment-header')}>
 
-              <Slot
-                className={cn(styles.username, 'talk-stream-comment-user-name')}
-                fill="commentAuthorName"
-                defaultComponent={CommentAuthorName}
-                queryData={queryData}
-                {...slotProps}
-              />
-
-              {isStaff(comment.tags) ? <TagLabel>Staff</TagLabel> : null}
-
-              <Slot
-                className={cn('talk-stream-comment-author-tags')}
-                fill="commentAuthorTags"
-                queryData={queryData}
-                {...slotProps}
-                inline
-              />
-
-              <span className={`${styles.bylineSecondary} talk-stream-comment-user-byline`} >
+              <div className={cn(styles.headerContainer, 'talk-stream-comment-header-container')}>
                 <Slot
-                  fill="commentTimestamp"
-                  defaultComponent={CommentTimestamp}
-                  className={'talk-stream-comment-published-date'}
-                  created_at={comment.created_at}
+                  className={cn(styles.username, 'talk-stream-comment-user-name')}
+                  fill="commentAuthorName"
+                  defaultComponent={CommentAuthorName}
                   queryData={queryData}
                   {...slotProps}
                 />
-                {
-                  (comment.editing && comment.editing.edited)
-                    ? <span>&nbsp;<span className={styles.editedMarker}>({t('comment.edited')})</span></span>
-                    : null
-                }
-              </span>
+
+                {isStaff(comment.tags) ? <TagLabel>Staff</TagLabel> : null}
+
+                <Slot
+                  className={cn('talk-stream-comment-author-tags')}
+                  fill="commentAuthorTags"
+                  queryData={queryData}
+                  {...slotProps}
+                  inline
+                />
+
+                <span className={`${styles.bylineSecondary} talk-stream-comment-user-byline`} >
+                  <Slot
+                    fill="commentTimestamp"
+                    defaultComponent={CommentTimestamp}
+                    className={'talk-stream-comment-published-date'}
+                    created_at={comment.created_at}
+                    queryData={queryData}
+                    {...slotProps}
+                  />
+                  {
+                    (comment.editing && comment.editing.edited)
+                      ? <span>&nbsp;<span className={styles.editedMarker}>({t('comment.edited')})</span></span>
+                      : null
+                  }
+                </span>
+              </div>
 
               <Slot
                 className={styles.commentInfoBar}

From fdf11fa2778e4d683b58d4e09702a0144de42ac1 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Mon, 4 Dec 2017 13:42:22 -0300
Subject: [PATCH 5/6] Adding extra container and styling

---
 .../src/tabs/stream/components/Comment.css     | 18 +++++++++++-------
 .../src/tabs/stream/components/Comment.js      | 18 ++++++++++--------
 client/coral-embed-stream/style/default.css    |  2 +-
 3 files changed, 22 insertions(+), 16 deletions(-)

diff --git a/client/coral-embed-stream/src/tabs/stream/components/Comment.css b/client/coral-embed-stream/src/tabs/stream/components/Comment.css
index 8bdeeaaa4..15d42bef0 100644
--- a/client/coral-embed-stream/src/tabs/stream/components/Comment.css
+++ b/client/coral-embed-stream/src/tabs/stream/components/Comment.css
@@ -160,18 +160,22 @@
   flex-direction: column;
   align-items: flex-start;
 
-  > * {
-    margin: 3px 0;
-  }
-
   @media (min-width: 480px) {
     display: flex;
     align-items: center;
     flex-direction: row;
+  }
+}
 
-    > * {
-      margin: 0 3px 0 0;
-    }
+.tagsContainer {
+  display: flex;
+}
+
+.tagsContainer > * {
+  margin: 3px;
+
+  &:first-child {
+    margin-left: 0px;
   }
 }
 
diff --git a/client/coral-embed-stream/src/tabs/stream/components/Comment.js b/client/coral-embed-stream/src/tabs/stream/components/Comment.js
index d66bebd75..ba14e3c7f 100644
--- a/client/coral-embed-stream/src/tabs/stream/components/Comment.js
+++ b/client/coral-embed-stream/src/tabs/stream/components/Comment.js
@@ -461,15 +461,17 @@ export default class Comment extends React.Component {
                   {...slotProps}
                 />
 
-                {isStaff(comment.tags) ? <TagLabel>Staff</TagLabel> : null}
+                <div className={cn(styles.tagsContainer, 'talk-stream-comment-header-tags-container')}>
+                  {isStaff(comment.tags) ? <TagLabel>Staff</TagLabel> : null}
 
-                <Slot
-                  className={cn('talk-stream-comment-author-tags')}
-                  fill="commentAuthorTags"
-                  queryData={queryData}
-                  {...slotProps}
-                  inline
-                />
+                  <Slot
+                    className={cn(styles.commentAuthorTagsSlot, 'talk-stream-comment-author-tags')}
+                    fill="commentAuthorTags"
+                    queryData={queryData}
+                    {...slotProps}
+                    inline
+                  />
+                </div>
 
                 <span className={`${styles.bylineSecondary} talk-stream-comment-user-byline`} >
                   <Slot
diff --git a/client/coral-embed-stream/style/default.css b/client/coral-embed-stream/style/default.css
index 154bfc868..a04ee6f05 100644
--- a/client/coral-embed-stream/style/default.css
+++ b/client/coral-embed-stream/style/default.css
@@ -192,7 +192,7 @@ body {
   display: inline-block;
   border-radius: 2px;
   font-size: 12px;
-  padding: 2px 6px;
+  padding: 5px 6px;
 }
 
 /* Comment Action Styles */

From 0640be2a7739dc192d35ce209f81fe26cc01ef17 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Mon, 4 Dec 2017 15:00:43 -0300
Subject: [PATCH 6/6] Timestamp no break

---
 client/coral-framework/components/CommentTimestamp.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/client/coral-framework/components/CommentTimestamp.css b/client/coral-framework/components/CommentTimestamp.css
index a4620902c..0c54019ff 100644
--- a/client/coral-framework/components/CommentTimestamp.css
+++ b/client/coral-framework/components/CommentTimestamp.css
@@ -2,5 +2,6 @@
   display: inline-block;
   color: #696969;
   font-size: 12px;
+  white-space: nowrap;
 }