fix(example-viewer): don't wrap code samples (#289)

Author: willshowell

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

@@ -1,8 +1,10 @@
 @import '../../../styles/constants';
 
 component-overview {
+  display: flex;
+  align-items: flex-start;
+
   @media (max-width: $small-breakpoint-width) {
-    display: flex;
     flex-direction: column;
   }
 }

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

@@ -28,11 +28,9 @@ app-component-viewer {
   min-height: 500px;
 
   table-of-contents {
-    display: inline-flex;
     top: 35px;
 
     @media (max-width: $small-breakpoint-width) {
-      display: flex;
       order: -1;
       position: inherit;
       width: auto;
@@ -41,7 +39,6 @@ app-component-viewer {
 }
 
 .docs-component-view-text-content {
-  display: inline-flex;
   flex-grow: 1;
 }
 

src/app/shared/example-viewer/_example-viewer-theme.scss

@@ -29,6 +29,7 @@
 
     .docs-example-source {
       border-bottom: 1px solid mat-color($foreground, divider);
+      overflow-x: scroll;
     }
   }
 }

src/styles/_general.scss

@@ -11,13 +11,6 @@ h1, h2 {
   font-weight: 400;
 }
 
-pre {
-  // Pre elements won't wrap text by default and can exceed the boundaries of their parent element.
-  // This adds extra scroll space when visiting the docs mobile. Pre-wrapping the code examples
-  // will ensure that the code never exceeds the page width.
-  white-space: pre-wrap;
-}
-
 .docs-primary-header {
   padding-left: 20px;