From c2fca3d9e0f54c8c9863a75f0626ef8d8e0613e1 Mon Sep 17 00:00:00 2001
From: Stefanie Fluin <sjtrimble@gmail.com>
Date: Tue, 18 Apr 2017 12:10:47 -0700
Subject: [PATCH] fix(aio): api list container centered

---
 aio/src/app/embedded/api/api-list.component.html | 2 +-
 aio/src/styles/2-modules/_api-list.scss          | 8 ++++++++
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/aio/src/app/embedded/api/api-list.component.html b/aio/src/app/embedded/api/api-list.component.html
index 7d52965de5..9f67fa587a 100644
--- a/aio/src/app/embedded/api/api-list.component.html
+++ b/aio/src/app/embedded/api/api-list.component.html
@@ -28,7 +28,7 @@
   </div>
 </div>
 
-<article class="l-content-small docs-content">
+<article class="api-list-container l-content-small docs-content">
   <div *ngFor="let section of filteredSections | async" >
     <h2>{{section.title}}</h2>
     <ul class="api-list">
diff --git a/aio/src/styles/2-modules/_api-list.scss b/aio/src/styles/2-modules/_api-list.scss
index 54f172e283..6c817b3d94 100644
--- a/aio/src/styles/2-modules/_api-list.scss
+++ b/aio/src/styles/2-modules/_api-list.scss
@@ -14,6 +14,12 @@ aio-api-list {
         border: 1px solid rgba($lightgray, 0.5);
         border-radius: 4px;
     }
+
+    .api-list-container {
+      display: flex;
+      flex-direction: column;
+      margin: 0 auto;
+    }
 }
 
 aio-api-list > div {
@@ -318,6 +324,8 @@ $api-symbols: (
       padding: 0 16px 0 0;
       text-decoration: none;
       transition: all .3s;
+      overflow: hidden;
+      text-overflow: ellipsis;
 
       &:hover {
         background: $blue-grey-50;