refactor(toc): move layout styles out of component and into parents (#323)

This also removes a class from header-link that was being used in two different contexts.

Author: willshowell

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

@@ -40,6 +40,7 @@ app-component-viewer {
 
   table-of-contents {
     top: 35px;
+    position: sticky;
 
     // Reposition on top of content on small screens and remove
     // sticky positioning

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

@@ -46,6 +46,7 @@ $guide-content-margin-side-xs: 15px;
 
 table-of-contents {
   top: 35px;
+  position: sticky;
 
   // Reposition on top of content on small screens and remove
   // sticky positioning

src/app/shared/doc-viewer/header-link.ts

@@ -20,7 +20,7 @@ import {Router} from '@angular/router';
     <a
       title="Link to this heading"
       [attr.aria-describedby]="example"
-      class="docs-markdown-a docs-header-link"
+      class="docs-markdown-a"
       aria-label="Link to this heading"
       [href]="url">
       <mat-icon>link</mat-icon>

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

@@ -1,20 +1,15 @@
 :host {
   font-size: 13px;
-  width: 19%;
-  position: sticky;
-  top: 0;
   padding-left: 20px;
   box-sizing: border-box;
 }
 
 .docs-toc-container {
+  box-sizing: border-box;
   padding: 5px 0 10px 12px;
-  width: 100%;
 }
 
 .docs-toc-heading {
-  margin: 0;
-  padding: 0;
   font-size: 13px;
   font-weight: bold;
 }
@@ -26,7 +21,6 @@ a {
   text-decoration: none;
   display: block;
   text-overflow: ellipsis;
-  width: 100%;
   overflow: hidden;
 }