Fix sidebar overlap for small width devices

This resolves a jarring text overlap issue with the sidebar by only adjusting
the `max-height` at larger widths, which matches the original rule being
overridden.

Fixes https://github.com/matrix-org/matrix-doc/issues/3049

assets-hugo/scss/custom.scss

@@ -45,9 +45,6 @@ Custom SCSS for the Matrix spec
   scroll-behavior: smooth;
   overscroll-behavior: contain;
 
-  /* This overrides calc(100vh - 10rem);, which gives us a blank space at the bottom of the sidebar */
-  max-height: calc(100vh - 6rem);
-
   &>.td-sidebar-nav__section {
     margin-top: 1rem;
   }
@@ -92,6 +89,15 @@ Custom SCSS for the Matrix spec
   }
 }
 
+@media (min-width: 768px) {
+  @supports (position: sticky) {
+    .td-sidebar-nav {
+      /* This overrides calc(100vh - 10rem);, which gives us a blank space at the bottom of the sidebar */
+      max-height: calc(100vh - 6rem);
+    }
+  }
+}
+
 /* Customise footer */
 footer {
   box-shadow: 0px 0px 8px rgba(179, 179, 179, 0.25);