FEATURE: Topic admin menu sticks to bottom on mobile. (#8620)

Our current topic admin menu is not always fully visible on a mobile
device, therefore some options are difficult to click.

To solve this issue, we can display the admin menu on the bottom of the
screen on mobile devices.

app/assets/javascripts/discourse/widgets/topic-admin-menu.js.es6

@@ -39,14 +39,15 @@ createWidget("topic-admin-menu-button", {
       fixed: attrs.fixed,
       topic: attrs.topic,
       openUpwards: attrs.openUpwards,
-      rightSide: attrs.rightSide,
+      rightSide: !this.site.mobileView && attrs.rightSide,
       actionButtons: []
     });
 
-    // We don't show the button when expanded on the right side
+    // We don't show the button when expanded on the right side on desktop
     if (
-      menu.attrs.actionButtons.length &&
-      !(attrs.rightSide && state.expanded)
+      (menu.attrs.actionButtons.length &&
+        !(attrs.rightSide && state.expanded)) ||
+      this.site.mobileView
     ) {
       result.push(
         this.attach("button", {
@@ -250,7 +251,7 @@ export default createWidget("topic-admin-menu", {
 
   buildAttributes(attrs) {
     let { top, left, outerHeight } = attrs.position;
-    const position = attrs.fixed ? "fixed" : "absolute";
+    const position = attrs.fixed || this.site.mobileView ? "fixed" : "absolute";
 
     if (attrs.rightSide) {
       return;
@@ -265,6 +266,11 @@ export default createWidget("topic-admin-menu", {
         bottom = bottom - (documentHeight - mainHeight) - outerHeight;
       }
 
+      if (this.site.mobileView) {
+        bottom = 0;
+        left = 0;
+      }
+
       return {
         style: `position: ${position}; bottom: ${bottom}px; left: ${left}px;`
       };
@@ -287,7 +293,17 @@ export default createWidget("topic-admin-menu", {
       this.state
     );
     return [
-      h("h3", I18n.t("topic.actions.title")),
+      h("div.header", [
+        h("h3", I18n.t("topic.actions.title")),
+        h(
+          "div",
+          this.attach("button", {
+            action: "clickOutside",
+            icon: "close",
+            className: "close-button"
+          })
+        )
+      ]),
       h(
         "ul",
         attrs.actionButtons

app/assets/stylesheets/common/base/topic-admin-menu.scss

@@ -29,6 +29,30 @@
     width: 100%;
     margin-bottom: 5px;
   }
+
+  .header {
+    .close-button {
+      display: none;
+    }
+  }
+
+  @include breakpoint(mobile-extra-large) {
+    width: 100%;
+    padding: 0;
+
+    .header {
+      padding: 10px 0 0 10px;
+      display: flex;
+      justify-content: space-between;
+      .close-button {
+        display: block;
+        background: transparent;
+      }
+    }
+    ul {
+      margin-top: 0;
+    }
+  }
 }
 
 .modal-body.feature-topic {