UX: Align bulk select menu toggle relative to main wrapper when possible

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", {

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 {