From 502e5fffcf7ccbe937b2ae406d5f9964756de3ab Mon Sep 17 00:00:00 2001
From: chapoi <101828855+chapoi@users.noreply.github.com>
Date: Fri, 13 Mar 2026 14:23:35 +0100
Subject: [PATCH] UX: fix MQ mismatch + adjust btn styling (#142)

* UX: fix MQ mismatch + adjust btn styling

* linting
---
 common/common.scss                            | 15 ++++++++-------
 javascripts/discourse/components/toc-mini.gjs |  2 +-
 2 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/common/common.scss b/common/common.scss
index 51c499e..28ec582 100644
--- a/common/common.scss
+++ b/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;
diff --git a/javascripts/discourse/components/toc-mini.gjs b/javascripts/discourse/components/toc-mini.gjs
index 14416ea..5e78a21 100644
--- a/javascripts/discourse/components/toc-mini.gjs
+++ b/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}}
         />