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
@@ -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);
