Merge pull request #2431 from spotify/orkohunter/fix-docs-on-mobile-view

Fix view for Table of Contents on smaller screens (Docs and Blog page)

microsite/static/css/custom.css

@@ -207,6 +207,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;
@@ -292,17 +340,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%,