Fix/6475 Table of Contents overflowing side of window and global foot…

…er (#140)

* Fix horizontal overflow of toc

* Add script to position fixed toc above footer is it overlaps

* Add lodash throttle

* 💄 eslint ignore lodash throttle issues

* Switch to lodash throttle

In several browsers there is a delay before the scroll position is restored.
This results in the ToC not being repositioned if the page is refreshed when scrolled to the bottom.
Lodash Throttle provides support for `trailing` events to always be fired, which fixes the issue, whereas rafThrottle does not.

* Add minified lodash.throttle

* 💄 follow file naming convention

* Use CSS to handle vertical overflow

source/wp-content/themes/wporg-developer/scss/main.scss

@@ -2004,7 +2004,7 @@ aside[id^="nav_menu"] .widget-title {
 	.table-of-contents {
 		display: flex;
 		flex-direction: column;
-		min-width: 230px;
+		min-width: 210px;
 		border: 1px solid #eee;
 		margin: 30px 0;
 		z-index: 1;
@@ -2032,7 +2032,7 @@ aside[id^="nav_menu"] .widget-title {
 		}
 
 		.items {
-			overflow-y: scroll;
+			overflow-y: auto;
 		}
 	}
 }
@@ -2241,7 +2241,6 @@ div[class*="-table-of-contents-container"] {
 		background: linear-gradient(to right, #fafafa 35%, #fff 35%);
 		max-width: 100%;
 		padding: 0;
-		overflow: auto;
 	}
 
 	#content {
@@ -2268,7 +2267,7 @@ div[class*="-table-of-contents-container"] {
 		padding: 4rem 0 4rem 4rem;
 		background: #fff;
 		box-sizing: border-box;
-		width: $single-handbook-content-primary-width * 100%;
+		width: 72%;
 
 		@media (max-width: 876px) {
 			padding: 4rem 20px;
@@ -2456,37 +2455,12 @@ body.responsive-show {
 
 @media (min-width: 90em) {
 	.site-main .table-of-contents {
-		position: fixed;
-		width: 15vw;
-
-		.code-reference & {
-			margin-left: 0;
-			left: calc( #{ $devhub-wrap-content-width } + ( ( 100vw - #{ $devhub-wrap-content-width } ) / 2 ) );
-			top: $devhub-wrap-toc-position-top;
-			max-height: calc(90vh - #{ $devhub-wrap-toc-position-top });
-		}
-
-		// Pages with sidebar
-		.widget-area + & {
-			left: calc( #{ $single-handbook-content-width } + ( ( 100vw - #{ $single-handbook-content-width } ) / 2 ) );
-			top: $single-handbook-toc-position-top;
-			max-height: calc(90vh - #{ $single-handbook-toc-position-top });
-		}
-	}
-}
-
-@media (min-width: 877px) {
-	// Pages which are not code reference and without a sidebar
-	.site-main .table-of-contents:not(.code-reference .site-main .table-of-contents):not(.widget-area + .site-main .table-of-contents) {
-		position: fixed;
-		width: 15vw;
+		position: sticky;
+		width: $single-handbook-toc-width;
+		margin: 0 calc(-#{ $single-handbook-toc-width } - 30px) 0;
+		float: right;
 		top: $single-handbook-toc-position-top;
-		left: calc(
-			#{ $single-handbook-content-width } * #{ $single-handbook-content-primary-width }
-			+ ( ( 100vw - #{ $single-handbook-content-width } ) / 2 )
-			+ 15px
-		);
-		max-height: calc(90vh - #{ $single-handbook-toc-position-top });
+		max-height: calc(80vh - #{ $single-handbook-toc-position-top });
 	}
 }
 

source/wp-content/themes/wporg-developer/scss/settings/_dimensions.scss

@@ -1,6 +1,5 @@
 $single-handbook-content-width: 960px;
-$single-handbook-content-primary-width: 0.72;
-$single-handbook-toc-position-top: 200px;
+$single-handbook-toc-width: 15vw;
+$single-handbook-toc-position-top: 150px;
 
 $devhub-wrap-content-width: 60em;
-$devhub-wrap-toc-position-top: 210px;