fix: allow table of contents to scroll

Fixes that it wasn't possible to scroll the table of contents independently of the page. Also gives a bit more space around it.

Fixes angular/components#29102.

Author: crisbeto

src/app/pages/component-viewer/component-viewer.scss

@@ -51,9 +51,10 @@ app-component-viewer {
     // sticky positioning
     @media (max-width: constants.$small-breakpoint-width) {
       order: -1;
-      position: inherit;
+      position: relative;
       width: auto;
       padding-left: 0;
+      max-height: none;
     }
   }
 }
@@ -65,7 +66,7 @@ app-component-viewer {
 
 .docs-component-api,
 .docs-component-overview {
-  width: 80%;
+  width: 75%;
 
   @media (max-width: constants.$small-breakpoint-width) {
     width: 100%;

src/app/pages/guide-viewer/guide-viewer.scss

@@ -36,7 +36,7 @@
 
 .docs-guide-content {
   flex-grow: 1;
-  width: 80%;
+  width: 75%;
 
   @media (max-width: constants.$extra-small-breakpoint-width) {
     width: 100%;
@@ -51,8 +51,9 @@ table-of-contents {
   // sticky positioning
   @media (max-width: constants.$extra-small-breakpoint-width) {
     order: -1;
-    position: inherit;
+    position: relative;
     width: auto;
     padding-left: 0;
+    max-height: none;
   }
 }

src/app/shared/table-of-contents/table-of-contents.scss

@@ -1,21 +1,24 @@
 :host {
   font-size: 13px;
   // Width is container width minus content width
-  width: 19%;
+  width: 24%;
   position: sticky;
   top: 0;
   padding-left: 25px;
   box-sizing: border-box;
   display: inline-flex;
   flex-direction: column;
+  max-height: calc(100vh - 120px);
+  overflow: auto;
 }
 
 .docs-toc-container {
   width: 100%;
-  padding: 5px 0 10px 10px;
+  padding: 8px 0 8px 16px;
+  box-sizing: border-box;
 
   & + .docs-toc-container {
-    padding-top: 8px;
+    padding-top: 12px;
   }
 }
 
@@ -39,5 +42,6 @@ a {
 }
 
 .docs-level-h4 {
-  margin-left: 12px;
+  padding-left: 12px;
+  box-sizing: border-box;
 }