feat(aio): layout max width and design cleanup

- Content container now has a max width and made the body background the same offwhite color so the cut-off is not visible
- Sidenav will always remain at the left of the page
- Added a max width to the api banner of filter search inputs
- Left aligned content container so it is flush with sidenav
- Changed API filter width to match size of filter results

aio/src/app/embedded/api/api-list.component.html

@@ -1,4 +1,4 @@
-<div class="l-flex-wrap banner is-plain api-filter">
+<div class="l-flex-wrap banner is-plain l-content-small api-filter">
 
   <div class="form-select-menu">
     <button class="form-select-button has-symbol" (click)="toggleTypeMenu()">

aio/src/styles/1-layouts/_layout-global.scss

@@ -2,6 +2,10 @@ html, body {
     height: 100%;
 }
 
+body {
+    background-color: $offwhite;
+}
+
 .clearfix {
     content: "";
     display: table;

aio/src/styles/1-layouts/_sidenav.scss

@@ -17,6 +17,7 @@ aio-nav-menu.top-menu .vertical-menu-item  {
 md-sidenav.mat-sidenav.sidenav {
   position: fixed;
   bottom: 0;
+  left: 0;
   padding: 80px 0px 0px;
   min-width: 260px;
   background-color: $offwhite;
@@ -30,7 +31,8 @@ md-sidenav.mat-sidenav.sidenav.collapsed {
 md-sidenav-container.sidenav-container {
     min-height: 100%;
     height: auto !important;
-    margin: 0 auto;
+    max-width: 1400px;
+    margin: 0;
     transform: none;
     padding-top: 64px;
 }

aio/src/styles/2-modules/_api-list.scss

@@ -18,7 +18,7 @@ aio-api-list {
         width: 182px;
     }
 
-    .banner {
+    .api-filter.banner {
         border: 1px solid rgba($lightgray, 0.5);
         border-radius: 4px;
     }