From ae227b7070bea5e7869012334fc923f66e153361 Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Thu, 17 Jun 2021 00:19:44 +0100 Subject: [PATCH] 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 | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/assets-hugo/scss/custom.scss b/assets-hugo/scss/custom.scss index 3116762e..62ae4532 100644 --- a/assets-hugo/scss/custom.scss +++ b/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);