Adding header container

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;
 

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}