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}}
         />