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 f5bead3b8..15d42bef0 100644 --- a/client/coral-embed-stream/src/tabs/stream/components/Comment.css +++ b/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 { 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 3da59afdc..ba14e3c7f 100644 --- a/client/coral-embed-stream/src/tabs/stream/components/Comment.js +++ b/client/coral-embed-stream/src/tabs/stream/components/Comment.js @@ -452,39 +452,43 @@ export default class Comment extends React.Component {
- - - {isStaff(comment.tags) ? Staff : null} - - - - +
- { - (comment.editing && comment.editing.edited) - ?  ({t('comment.edited')}) - : null - } - + +
+ {isStaff(comment.tags) ? Staff : null} + + +
+ + + + { + (comment.editing && comment.editing.edited) + ?  ({t('comment.edited')}) + : null + } + +