From 8c58a1cfa9b384dab620c9828ae9f349ce3b358c 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) {