diff --git a/app/assets/javascripts/discourse/components/bulk-select-button.js b/app/assets/javascripts/discourse/components/bulk-select-button.js index 1070402ca02..11beee344ef 100644 --- a/app/assets/javascripts/discourse/components/bulk-select-button.js +++ b/app/assets/javascripts/discourse/components/bulk-select-button.js @@ -1,9 +1,24 @@ +import { schedule } from "@ember/runloop"; import Component from "@ember/component"; import showModal from "discourse/lib/show-modal"; export default Component.extend({ classNames: ["bulk-select-container"], + didInsertElement() { + this._super(...arguments); + + schedule("afterRender", () => { + let mainOutletPadding = + window.getComputedStyle(document.querySelector("#main-outlet")) + .paddingTop || 0; + + document.querySelector( + ".bulk-select-container" + ).style.top = mainOutletPadding; + }); + }, + actions: { showBulkActions() { const controller = showModal("topic-bulk-actions", { diff --git a/app/assets/stylesheets/desktop/topic-list.scss b/app/assets/stylesheets/desktop/topic-list.scss index 03ab18a8b9b..13e1d03da15 100644 --- a/app/assets/stylesheets/desktop/topic-list.scss +++ b/app/assets/stylesheets/desktop/topic-list.scss @@ -188,13 +188,28 @@ } } +.bulk-select-container { + @supports (position: sticky) { + @media screen and (min-width: 1250px) { + position: sticky; + position: -webkit-sticky; + } + } +} + #bulk-select { position: fixed; right: 20px; top: 130px; - padding: 5px; background-color: $secondary; z-index: z("dropdown"); + @supports (position: sticky) { + @media screen and (min-width: 1250px) { + position: absolute; + right: -60px; + top: 0; + } + } } button.dismiss-read {