From 3e347970c7c632658976f1debcc622eb8ed88a90 Mon Sep 17 00:00:00 2001
From: Michael Rose <est.michael@gmail.com>
Date: Wed, 12 Jul 2017 12:03:14 -0400
Subject: [PATCH] Add vertical scrollbar to sidebars that extend outside the
 viewport

Viewing overflowing sidebar content requires scrolling the entire page which is annoying and causes the reader to lose their place.

Use CSS `calc` to approximate height of the sidebar (`100vh` - height of the masthead) and apply `overflow-y: auto` to add vertical scrollbars when needed.

Fixes #706
---
 CHANGELOG.md                              | 6 ++++++
 _sass/minimal-mistakes/_sidebar.scss      | 6 ++++++
 docs/_docs/18-history.md                  | 8 +++++++-
 docs/_sass/minimal-mistakes/_sidebar.scss | 6 ++++++
 4 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index efa6e4800222..66d16f48907c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,9 @@
+## Unreleased
+
+### Enhancements
+
+- Add scrollbar to sidebars with overflowing content that extends outside the viewport's height. [#706](https://github.com/mmistakes/minimal-mistakes/issues/706)
+
 ## [4.4.2](https://github.com/mmistakes/minimal-mistakes/releases/tag/4.4.2)
 
 ### Enhancements
diff --git a/_sass/minimal-mistakes/_sidebar.scss b/_sass/minimal-mistakes/_sidebar.scss
index d34eeb7469b8..1470aa80f0a7 100644
--- a/_sass/minimal-mistakes/_sidebar.scss
+++ b/_sass/minimal-mistakes/_sidebar.scss
@@ -22,6 +22,12 @@
     &:hover {
       opacity: 1;
     }
+
+    &.sticky {
+      overflow-y: auto;
+      /* calculate height of nav list */
+      height: calc(100vh - 90px - 2em); // viewport height - approx. masthead height - main content top margin
+    }
   }
 
   @include breakpoint($x-large) {
diff --git a/docs/_docs/18-history.md b/docs/_docs/18-history.md
index 193d1067fc02..691929da1018 100644
--- a/docs/_docs/18-history.md
+++ b/docs/_docs/18-history.md
@@ -4,9 +4,15 @@ permalink: /docs/history/
 excerpt: "Change log of enhancements and bug fixes made to the theme."
 sidebar:
   nav: docs
-last_modified_at: 2017-07-07T15:45:45-04:00
+last_modified_at: 2017-07-12T11:57:08-04:00
 ---
 
+## Unreleased
+
+### Enhancements
+
+- Add scrollbar to sidebars with overflowing content that extends outside the viewport's height. [#706](https://github.com/mmistakes/minimal-mistakes/issues/706)
+
 ## [4.4.2](https://github.com/mmistakes/minimal-mistakes/releases/tag/4.4.2)
 
 ### Enhancements
diff --git a/docs/_sass/minimal-mistakes/_sidebar.scss b/docs/_sass/minimal-mistakes/_sidebar.scss
index d34eeb7469b8..1470aa80f0a7 100644
--- a/docs/_sass/minimal-mistakes/_sidebar.scss
+++ b/docs/_sass/minimal-mistakes/_sidebar.scss
@@ -22,6 +22,12 @@
     &:hover {
       opacity: 1;
     }
+
+    &.sticky {
+      overflow-y: auto;
+      /* calculate height of nav list */
+      height: calc(100vh - 90px - 2em); // viewport height - approx. masthead height - main content top margin
+    }
   }
 
   @include breakpoint($x-large) {