fix: consistent toc positioning (#316)

* fix(toc): align toc left and use same styles for overview and api

* fix(guides): make toc sticky and position on top for small screens

Author: willshowell

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

@@ -5,7 +5,7 @@
   font-weight: bold;
   font-size: 20px;
   background: none;
-  
+
   code {
     background: none;
   }

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

@@ -27,13 +27,27 @@ app-component-viewer {
   position: relative;
   min-height: 500px;
 
+  // Display outlet components with toc as flex and switch to
+  // vertical direction on small screens
+  component-overview, component-api {
+    display: flex;
+    align-items: flex-start;
+
+    @media (max-width: $small-breakpoint-width) {
+      flex-direction: column;
+    }
+  }
+
   table-of-contents {
     top: 35px;
 
+    // Reposition on top of content on small screens and remove
+    // sticky positioning
     @media (max-width: $small-breakpoint-width) {
       order: -1;
       position: inherit;
       width: auto;
+      padding-left: 0;
     }
   }
 }

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

@@ -47,7 +47,6 @@ export class ComponentViewer {
 @Component({
   selector: 'component-overview',
   templateUrl: './component-overview.html',
-  styleUrls: ['./component-overview.scss'],
   encapsulation: ViewEncapsulation.None,
 })
 export class ComponentOverview implements OnInit {

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

@@ -23,15 +23,20 @@ $guide-content-margin-side-xs: 15px;
 }
 
 .docs-guide-toc-and-content {
-  display: block;
+  display: flex;
+  align-items: flex-start;
+
   text-align: left;
   max-width: 940px;
   margin: 0 auto;
+
+  @media (max-width: $small-breakpoint-width) {
+    flex-direction: column;
+  }
 }
 
 .docs-guide-content {
-  display: block;
-  float: left;
+  flex-grow: 1;
   width: 80%;
 
   @media (max-width: $small-breakpoint-width) {
@@ -41,10 +46,13 @@ $guide-content-margin-side-xs: 15px;
 
 table-of-contents {
   top: 35px;
-  float: right;
-  width: 15%;
 
+  // Reposition on top of content on small screens and remove
+  // sticky positioning
   @media (max-width: $small-breakpoint-width) {
-    display: none;
+    order: -1;
+    position: inherit;
+    width: auto;
+    padding-left: 0;
   }
 }