Merge branch 'master' into performance-enhancements

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;
 }
@@ -152,9 +151,32 @@
 }
 
 .header {
-  display: flex;
-  align-items: center;
   margin: 10px 0;
+  display: flex;
+}
+
+.headerContainer {
+  flex: 1;
+  flex-direction: column;
+  align-items: flex-start;
+
+  @media (min-width: 480px) {
+    display: flex;
+    align-items: center;
+    flex-direction: row;
+  }
+}
+
+.tagsContainer {
+  display: flex;
+}
+
+.tagsContainer > * {
+  margin: 3px;
+
+  &:first-child {
+    margin-left: 0px;
+  }
 }
 
 .content {

client/coral-embed-stream/src/tabs/stream/components/Comment.js

@@ -452,39 +452,43 @@ 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>
+
+                <div className={cn(styles.tagsContainer, 'talk-stream-comment-header-tags-container')}>
+                  {isStaff(comment.tags) ? <TagLabel>Staff</TagLabel> : null}
+
+                  <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
+                    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}

client/coral-embed-stream/style/default.css

@@ -190,11 +190,9 @@ body {
   background-color: #4C1066;
   color: white;
   display: inline-block;
-  margin: 0px 5px;
-  padding: 5px 5px;
   border-radius: 2px;
   font-size: 12px;
-  font-weight: bold;
+  padding: 5px 6px;
 }
 
 /* Comment Action Styles */

client/coral-framework/components/CommentTimestamp.css

@@ -2,5 +2,6 @@
   display: inline-block;
   color: #696969;
   font-size: 12px;
+  white-space: nowrap;
 }
 

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;

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'),
+  ],
 };