From 1054d554d8936fb507340fcb105e5c936ff052a1 Mon Sep 17 00:00:00 2001
From: George Kalpakas <kalpakas.g@gmail.com>
Date: Tue, 9 Mar 2021 14:15:48 +0200
Subject: [PATCH] fix(docs-infra): avoid truncating several API list items
 (#41051)

Previously, with the min width of 220px per item, several API list items
were truncated.

This commit increases the min width per item to 330px, which allows
almost all items to have their full text shown. It also increases the
API list page's max content width from 50em (800px) to 62.5em (1000px)
to allow items to be shown on three columns despite their increased
width. This increase in the content width shouldn't negatively affect
UX, since the API list page uses a multi-column layout (i.e. it does not
contain 1000px-lines of text.)

Before: ![api-list before][1]
After: ![api-list after][2]

[1]: https://user-images.githubusercontent.com/8604205/109396457-5f5e1f00-793a-11eb-80cf-1418f409325a.png
[2]: https://user-images.githubusercontent.com/8604205/109396659-499d2980-793b-11eb-95d3-f54250f7fab5.png

PR Close #41051
---
 aio/content/marketing/api.html                | 6 ++++--
 aio/src/styles/1-layouts/_content-layout.scss | 2 +-
 aio/src/styles/2-modules/_api-list.scss       | 6 ++----
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/aio/content/marketing/api.html b/aio/content/marketing/api.html
index c2508b53b3..cc6c84787d 100755
--- a/aio/content/marketing/api.html
+++ b/aio/content/marketing/api.html
@@ -1,2 +1,4 @@
-<h1 class="no-toc">API List</h1>
-<aio-api-list></aio-api-list>
+<div class="center-layout">
+  <h1 class="no-toc">API List</h1>
+  <aio-api-list></aio-api-list>
+</div>
diff --git a/aio/src/styles/1-layouts/_content-layout.scss b/aio/src/styles/1-layouts/_content-layout.scss
index ef21d43c4a..2c03a4b1be 100644
--- a/aio/src/styles/1-layouts/_content-layout.scss
+++ b/aio/src/styles/1-layouts/_content-layout.scss
@@ -18,7 +18,7 @@
     padding: 80px 1rem 1rem;
   }
 
-  @include marketing-pages($extraSelectors: ('.page-guide-cheatsheet'), $nestParentSelector: true) {
+  @include marketing-pages($extraSelectors: ('.page-api', '.page-guide-cheatsheet'), $nestParentSelector: true) {
     max-width: none;
   }
 
diff --git a/aio/src/styles/2-modules/_api-list.scss b/aio/src/styles/2-modules/_api-list.scss
index 9b519d33e5..ae2162a7ab 100644
--- a/aio/src/styles/2-modules/_api-list.scss
+++ b/aio/src/styles/2-modules/_api-list.scss
@@ -89,9 +89,7 @@ aio-api-list {
   .api-list-container {
     display: flex;
     flex-direction: column;
-    margin: 0 auto;
-    max-width: 1100px;
-    padding: 16px 16px 16px 0;
+    padding: 16px 0;
     position: relative;
 
     @media handheld and (max-width: $phone-breakpoint),
@@ -124,7 +122,7 @@ aio-api-list {
         float: left;
         width: 33%;
         overflow: hidden;
-        min-width: 220px;
+        min-width: 330px;
         text-overflow: ellipsis;
         white-space: nowrap;