fix sidebar on smaller widths

Author: Blargian

src/css/custom.scss

@@ -73,7 +73,6 @@ body {
 }
 /* Rich's attempt to add scrollbar to nav */
 .sidebar_mhZE {
-  padding-bottom: 4rem;
   height: 100% !important;
 }
 /* Make the navbar move with the page */

src/theme/DocItem/Layout/index.js

@@ -111,7 +111,7 @@ export default function DocItemLayout({children}) {
           <DocItemPaginator />
         </div>
       </div>
-      {docTOC.desktop && <div className="col col--3">{docTOC.desktop}</div>}
+      {docTOC.desktop && <div className={clsx(styles.tocSidebar, 'col col--3')}>{docTOC.desktop}</div>}
     </div>
   );
 }

src/theme/DocItem/Layout/styles.module.scss

@@ -1,5 +1,16 @@
 @use '../../../css/breakpoints.scss' as breakpoints;
 
+.tocSidebar {
+  display: none;
+}
+
+@media (min-width: breakpoints.$mobile-breakpoint) {
+  .tocSidebar {
+    display: flex;
+  }
+}
+
+
 .docItemContainer header + *,
 .docItemContainer article > *:first-child {
   margin-top: 0;

src/theme/DocItem/TOC/Desktop/styles.module.scss

@@ -10,15 +10,17 @@
     display: none; // don't show by default on mobile
 }
 
-.docTOCContainer {
-  height: calc(100vh - (var(--ifm-navbar-height) + 2rem));
-  display: flex;
-  flex-flow: column nowrap;
-  position: sticky;
-  gap: 24px;
-  padding-bottom: 3.5rem;
-  overflow-y: auto;
-  top: calc(var(--ifm-navbar-height) + 1rem);
+@media screen and (min-width: breakpoints.$mobile-breakpoint) {
+  .docTOCContainer {
+    height: calc(100vh - (var(--ifm-navbar-height) + 2rem));
+    display: flex;
+    flex-flow: column nowrap;
+    position: sticky;
+    gap: 24px;
+    padding-bottom: 3.5rem;
+    overflow-y: auto;
+    top: calc(var(--ifm-navbar-height) + 1rem);
+  }
 }
 
 .docCloudCardHeader {