DEV: add toggle to mini-buttons for mobile

common/common.scss

@@ -1,3 +1,5 @@
+@use "lib/viewport";
+
 $padding-basis: 0.75em;
 
 @media screen and (min-width: 925px) {
@@ -8,7 +10,9 @@ $padding-basis: 0.75em;
 }
 
 .d-toc-main {
-  display: flex;
+  @include viewport.from(sm) {
+    display: flex;
+  }
   min-width: 6em;
   max-width: 13em;
   word-wrap: break-word;

javascripts/discourse/components/toc-contents.gjs

@@ -162,7 +162,11 @@ export default class TocContents extends Component {
 
   <template>
     {{#unless @renderTimeline}}
-      <TocMiniButtons @renderTimeline={{@renderTimeline}} @postID={{@postID}} />
+      <TocMiniButtons
+        @renderTimeline={{@renderTimeline}}
+        @postID={{@postID}}
+        @expandAll={{this.args.expandAll}}
+      />
     {{/unless}}
     <div
       id="d-toc"

javascripts/discourse/components/toc-mini-buttons.gjs

@@ -6,6 +6,10 @@ import DButton from "discourse/components/d-button";
 export default class TocMiniButtons extends Component {
   @service tocProcessor;
 
+  get expandLabel() {
+    return this.args.expandAll ? "Reset expand" : "Expand all";
+  }
+
   @action
   callCloseOverlay() {
     this.tocProcessor.setOverlayVisible(false);
@@ -16,16 +20,29 @@ export default class TocMiniButtons extends Component {
     this.tocProcessor.jumpToEnd(this.args.renderTimeline, this.args.postID);
   }
 
+  @action
+  toggleExpandAll() {
+    this.args.expandAll = !this.args.expandAll;
+  }
+
   <template>
     <div class="d-toc-icons">
       <DButton
         @action={{this.callJumpToEnd}}
         @icon="downward"
+        aria-label="Scroll to bottom"
         class="btn btn-transparent scroll-to-bottom"
       />
+      <DButton
+        @action={{this.toggleExpandAll}}
+        aria-label={{this.expandLabel}}
+        class="d-toc__btn-expand btn-transparent btn-small"
+        @icon="angles-down"
+      />
       <DButton
         @action={{this.closeOverlay}}
         @icon="xmark"
+        aria-label="close table of contents"
         class="btn btn-transparent d-toc-close"
       />
     </div>