From 304a32b655d5ff1eac0d253d569223699783a9ca Mon Sep 17 00:00:00 2001
From: George Kalpakas <kalpakas.g@gmail.com>
Date: Tue, 9 Mar 2021 14:15:47 +0200
Subject: [PATCH] fix(docs-infra): limit max content width on "Contributors"
 and "Cheat sheet" pages (#41051)

Previously, the content width on the "Contributors" page (`/about`) and
the "Cheat sheet" guide (`/guide/cheatsheet`) was unlimited (i.e. the
content would take up all the available space horizontally). This was
not very ergonomic on large screens. Especially on the "Cheat sheet"
guide there was a lot of unnecessary whitespace between the code shown
on the left column and the description shown on the right column.

This commit fixes this by setting a max content width for both pages of
84em (1404px by default). This keeps the content at a more manageable
width and avoids unnecessary whitespace.

Before (contributors): ![contributors page on 2500px before][1]
Before (cheatsheet): ![cheatsheet on 2500px before][2]
After (contributors): ![contributors page on 2500px after][3]
After (cheatsheet): ![cheatsheet on 2500px after][4]

[1]: https://user-images.githubusercontent.com/8604205/109394323-1bb1e800-792f-11eb-9cd6-c5b83e5ae921.png
[2]: https://user-images.githubusercontent.com/8604205/109394329-1fde0580-792f-11eb-91c0-4ed7ad408b17.png
[3]: https://user-images.githubusercontent.com/8604205/109394319-181e6100-792f-11eb-9463-a281dfe80448.png
[4]: https://user-images.githubusercontent.com/8604205/109394330-210f3280-792f-11eb-9837-ddc7a8d01d19.png

PR Close #41051
---
 aio/content/guide/cheatsheet.md              | 4 ++++
 aio/content/marketing/about.html             | 2 +-
 aio/src/styles/1-layouts/_layout-global.scss | 5 +++++
 3 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/aio/content/guide/cheatsheet.md b/aio/content/guide/cheatsheet.md
index b289a5783c..0af6277497 100644
--- a/aio/content/guide/cheatsheet.md
+++ b/aio/content/guide/cheatsheet.md
@@ -1,3 +1,5 @@
+<div class="center-layout-wide">
+
 <h1 class="no-toc">Cheat Sheet</h1>
 
 <table class="is-full-width is-fixed-layout">
@@ -390,3 +392,5 @@ so the <code>@Directive</code> configuration applies to components as well</p>
 </td>
 </tr>
 </tbody></table>
+
+</div>
diff --git a/aio/content/marketing/about.html b/aio/content/marketing/about.html
index c006ad27ff..a3d3dc1e32 100644
--- a/aio/content/marketing/about.html
+++ b/aio/content/marketing/about.html
@@ -2,7 +2,7 @@
   <h1 class="banner-headline no-toc no-anchor">Angular Contributors</h1>
 </header>
 
-<article>
+<article class="center-layout-wide">
   <h2>Building For the Future</h2>
   <p>
     Angular is built by a team of engineers who share a passion for making web development feel
diff --git a/aio/src/styles/1-layouts/_layout-global.scss b/aio/src/styles/1-layouts/_layout-global.scss
index 16ea6c1ff1..13735e0c85 100644
--- a/aio/src/styles/1-layouts/_layout-global.scss
+++ b/aio/src/styles/1-layouts/_layout-global.scss
@@ -12,6 +12,11 @@ body,
   max-width: 62.5em;
 }
 
+.center-layout-wide {
+  margin: 0 auto;
+  max-width: 84em;
+}
+
 .github-links + .content h1 {
   max-width: 90%;
 }