Adding extra container and styling

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

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

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