Styling

client/coral-embed-stream/src/components/Comment.css

@@ -162,3 +162,7 @@
   vertical-align: middle;
   font-size: 14px;
 }
+
+.commentFooter {
+  padding-top: 8px;
+}

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

@@ -443,51 +443,53 @@ export default class Comment extends React.Component {
                 <Slot fill="commentContent" comment={comment} defaultComponent={CommentContent} />
               </div>
           }
-
-          <div className="commentActionsLeft comment__action-container">
-            <Slot
-              fill="commentReactions"
-              data={this.props.data}
-              root={this.props.root}
-              asset={asset}
-              comment={comment}
-              commentId={comment.id}
-              inline
-            />
-            {!disableReply &&
-              <ActionButton>
-                <ReplyButton
-                  onClick={this.showReplyBox}
-                  parentCommentId={parentId || comment.id}
-                  currentUserId={currentUser && currentUser.id}
-                />
-              </ActionButton>}
-          </div>
-          <div className="commentActionsRight comment__action-container">
-            <Slot
-              fill="commentActions"
-              wrapperComponent={ActionButton}
-              data={this.props.data}
-              root={this.props.root}
-              asset={asset}
-              comment={comment}
-              commentId={comment.id}
-              inline
-            />
-            <ActionButton>
-              <FlagComment
-                flaggedByCurrentUser={!!myFlag}
-                flag={myFlag}
-                id={comment.id}
-                author_id={comment.user.id}
-                postFlag={postFlag}
-                addNotification={addNotification}
-                postDontAgree={postDontAgree}
-                deleteAction={deleteAction}
-                showSignInDialog={showSignInDialog}
-                currentUser={currentUser}
+            
+          <div className={cn(styles.commentFooter, 'talk-stream-comment-footer')}>       
+            <div className="commentActionsLeft comment__action-container">
+              <Slot
+                fill="commentReactions"
+                data={this.props.data}
+                root={this.props.root}
+                asset={asset}
+                comment={comment}
+                commentId={comment.id}
+                inline
               />
-            </ActionButton>
+              {!disableReply &&
+                <ActionButton>
+                  <ReplyButton
+                    onClick={this.showReplyBox}
+                    parentCommentId={parentId || comment.id}
+                    currentUserId={currentUser && currentUser.id}
+                  />
+                </ActionButton>}
+            </div>
+            <div className="commentActionsRight comment__action-container">
+              <Slot
+                fill="commentActions"
+                wrapperComponent={ActionButton}
+                data={this.props.data}
+                root={this.props.root}
+                asset={asset}
+                comment={comment}
+                commentId={comment.id}
+                inline
+              />
+              <ActionButton>
+                <FlagComment
+                  flaggedByCurrentUser={!!myFlag}
+                  flag={myFlag}
+                  id={comment.id}
+                  author_id={comment.user.id}
+                  postFlag={postFlag}
+                  addNotification={addNotification}
+                  postDontAgree={postDontAgree}
+                  deleteAction={deleteAction}
+                  showSignInDialog={showSignInDialog}
+                  currentUser={currentUser}
+                />
+              </ActionButton>
+            </div>
           </div>
         </div>
         {activeReplyBox === comment.id

plugins/coral-plugin-like/client/styles.css

@@ -9,6 +9,7 @@
   padding: 0px;
   border: none;
   font-size: inherit;
+  vertical-align: middle;
 
   &:hover {
     color: #767676;

plugins/coral-plugin-respect/client/styles.css

@@ -9,6 +9,7 @@
   padding: 0px;
   border: none;
   font-size: inherit;
+  vertical-align: middle;
 
   &:hover {
     color: #767676;

plugins/talk-plugin-featured-comments/client/components/FeaturedButton.css

@@ -4,6 +4,7 @@
   padding: 0px;
   border: none;
   margin-right: 10px;
+  vertical-align: middle;
 }
 
 .button:hover {
@@ -23,5 +24,5 @@
 .icon {
   font-size: 18px;
   padding: 0 5px;
-  vertical-align: middle;
+  vertical-align: top;
 }