diff --git a/app/assets/javascripts/discourse/widgets/post.js.es6 b/app/assets/javascripts/discourse/widgets/post.js.es6 index 470a4c5dca5..1fcc7aab15c 100644 --- a/app/assets/javascripts/discourse/widgets/post.js.es6 +++ b/app/assets/javascripts/discourse/widgets/post.js.es6 @@ -299,8 +299,7 @@ createWidget('post-contents', { const repliesBelow = state.repliesBelow; if (repliesBelow.length) { - result.push(h('section.embedded-posts.bottom', [ - + result.push(h('section.embedded-posts.bottom', [ repliesBelow.map(p => { return this.attach('embedded-post', p, { model: this.store.createRecord('post', p) }); }), diff --git a/app/assets/stylesheets/desktop/topic-post.scss b/app/assets/stylesheets/desktop/topic-post.scss index d1ac42b643e..0aba11f5d6f 100644 --- a/app/assets/stylesheets/desktop/topic-post.scss +++ b/app/assets/stylesheets/desktop/topic-post.scss @@ -229,6 +229,19 @@ nav.post-controls { border: 1px solid $primary-low; } + .collapse-down, .collapse-up { + position: absolute; + color: $primary-medium; + background: $secondary; + border: 1px solid $primary-low; + padding: 6px 9px 8px; + z-index: 99; // Needs to be higher than topic-avatar + &:hover { + background: $primary-low; + color: $primary; + } + } + // bottom means "reply expansion" below a post &.bottom { &.hidden { @@ -238,12 +251,7 @@ nav.post-controls { } &.bottom { .collapse-up { - position: absolute; - transform: translate(-50%, -170%); - background: $secondary; - border: 1px solid $primary-low; - padding: 6px 9px 8px; - z-index: 99; // Needs to be higher than topic-avatar + transform: translate(-50%, -164%); } .row { padding-bottom: .5em; @@ -258,12 +266,7 @@ nav.post-controls { // top means "in reply to expansion" above a post &.top { .collapse-down { - position: absolute; transform: translate(-50%, 55%); - background: $secondary; - border: 1px solid $primary-low; - padding: 6px 9px 8px; - z-index: 99; // Needs to be higher than topic-avatar } margin-left: 56px; width: 701px;