UX: fix MQ mismatch + adjust btn styling (#142)

* UX: fix MQ mismatch + adjust btn styling

* linting

common/common.scss

@@ -158,20 +158,21 @@ html.rtl SELECTOR {
 .d-toc-mini {
   align-self: stretch;
 
-  button {
+  &__button {
+    border-radius: 0;
+    background: var(--secondary);
+    border: 1px solid var(--primary-low);
     height: 100%;
   }
 }
 
 // overlaid timeline (on mobile and narrow screens)
-@include viewport.until(md) {
+@include viewport.until(lg) {
   .topic-navigation {
     &:has(.d-toc-mini) {
-      @include viewport.until(md) {
-        position: sticky;
-        bottom: calc(env(safe-area-inset-bottom) + var(--composer-height, 0px));
-        z-index: z("timeline");
-      }
+      position: sticky;
+      bottom: calc(env(safe-area-inset-bottom) + var(--composer-height, 0px));
+      z-index: z("timeline");
 
       .d-toc-wrapper {
         position: fixed;

javascripts/discourse/components/toc-mini.gjs

@@ -41,7 +41,7 @@ export default class TocMini extends Component {
     {{#if this.tocProcessor.hasTOC}}
       <span class="d-toc-mini">
         <DButton
-          class="btn-primary"
+          class="d-toc-mini__button"
           @icon="bars-staggered"
           @action={{this.toggleTOCOverlay}}
         />