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] 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 */