From 522794b0632850d576e2b0a4dfe920f5071f0977 Mon Sep 17 00:00:00 2001
From: Himanshu Mishra <himanshu@orkohunter.net>
Date: Fri, 11 Sep 2020 18:12:54 +0200
Subject: [PATCH] Fix view for Table of Contents on smaller screens

For backstage.io/docs and backstage.io/blog pages, we have a sidebar with Table of Contents. On smaller screens, this sidebar becomes a nav bar on top with a toggle hamburger button. However, we also have a nav bar on the website. This nav bar hinders the view of the TOC bar.

This commit fixes the view for Table of Contents on Blog and Docs page on smaller screens.
---
 microsite/static/css/custom.css | 54 +++++++++++++++++++++++++++++++--
 1 file changed, 51 insertions(+), 3 deletions(-)

diff --git a/microsite/static/css/custom.css b/microsite/static/css/custom.css
index 5e078582cc..5455a67eb6 100644
--- a/microsite/static/css/custom.css
+++ b/microsite/static/css/custom.css
@@ -203,6 +203,54 @@ td {
   border-radius: 0.25rem;
 }
 
+/*
+ * Fix for viewing Table of Contents bar on documentation
+ * and blog pages on smaller screens.
+ */
+@media only screen and (max-width: 1023px) {
+  /* Nav bar hides the docs toc bar */
+  .docMainWrapper {
+    margin-top: 4rem;
+  }
+
+  /* Toc bar does not have to be fixed */
+  .docsNavContainer {
+    position: unset;
+    width: 95vw;
+    z-index: 100;
+    margin-left: -2vw;
+  }
+
+  /* Toc bar does not have to be fixed when slider is active */
+  .docsSliderActive .toc .navBreadcrumb,
+  .tocActive .navBreadcrumb {
+    position: unset;
+  }
+
+  /* Fix unexpected width increase when toc is toggled */
+  .docsSliderActive .toc .navBreadcrumb,
+  .tocActive .navBreadcrumb {
+    width: inherit;
+  }
+
+  /* This pseudo-element stops toc toggle button to be clicked */
+  header.postHeader::before {
+    height: 2em !important;
+    margin-top: -2em !important;
+  }
+
+  /* This pseudo-element stops toc toggle button to be clicked */
+  #__docusaurus.postHeaderTitle::before {
+    height: 1em;
+    margin-top: -1em;
+  }
+
+  /* Useless button causing trouble */
+  .tocToggler {
+    display: none;
+  }
+}
+
 /* content */
 .postContainer blockquote {
   color: $textColor;
@@ -288,17 +336,17 @@ code {
   background: linear-gradient(70.44deg, #121212 75%, #5d817b 100%);
 }
 .bg-teal-top-right {
-  background: 
+  background:
   /* linear-gradient(
       178.64deg,
       rgba(255, 255, 255, 0) 57.61%,
       rgba(255, 255, 255, 0.17) 127.71%
-    ), */ 
+    ), */
     /* linear-gradient(
       144.35deg,
       rgba(98, 197, 179, 0) 56.68%,
       rgba(98, 197, 179, 0.59) 109.25%
-    ), */ 
+    ), */
     /* linear-gradient(
       192.29deg,
       rgba(155, 240, 225, 0) 54.17%,