From dfad9018f91cfbb20ca5914fd03a994bb8bcf1f2 Mon Sep 17 00:00:00 2001
From: George Kalpakas <kalpakas.g@gmail.com>
Date: Fri, 19 Mar 2021 13:29:52 +0200
Subject: [PATCH] fix(docs-infra): increase the max width of the
 `file-not-found` page (#41275)

Previously, the max width of the `file-not-found` page was limited to
50rem (800px by default). This allowed little space for showing
potentially helpful search results, which are shown in columns).

This commit increases the max width of the `file-not-found` page to
84rem (1344px by default) to allow search results to be visible without
requiring scrolling. This will not negatively affect UX, because the
page uses a multi-column layout and therefore there will rarely be long
lines of text to scan.

PR Close #41275
---
 aio/content/file-not-found.md                 | 12 ++++++------
 aio/src/styles/1-layouts/_content-layout.scss |  4 +++-
 2 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/aio/content/file-not-found.md b/aio/content/file-not-found.md
index da2acbcadad..880e42cda23 100644
--- a/aio/content/file-not-found.md
+++ b/aio/content/file-not-found.md
@@ -1,10 +1,10 @@
-@description
-
-<div class="nf-container l-flex-wrap flex-center">
+<div class="center-layout-wide">
+  <div class="nf-container l-flex-wrap flex-center">
     <img src="assets/images/support/angular-404.svg" width="300" height="300"/>
     <div class="nf-response l-flex-wrap">
-        <h1 class="no-anchor no-toc">Page Not Found</h1>
-        <p>We're sorry. The page you are looking for cannot be found.</p>
+      <h1 class="no-anchor no-toc">Page Not Found</h1>
+      <p>We're sorry. The page you are looking for cannot be found.</p>
     </div>
+  </div>
+  <aio-file-not-found-search></aio-file-not-found-search>
 </div>
-<aio-file-not-found-search></aio-file-not-found-search>
diff --git a/aio/src/styles/1-layouts/_content-layout.scss b/aio/src/styles/1-layouts/_content-layout.scss
index 63dc42416e4..b64103fa328 100644
--- a/aio/src/styles/1-layouts/_content-layout.scss
+++ b/aio/src/styles/1-layouts/_content-layout.scss
@@ -20,7 +20,9 @@
     padding: 80px 1rem 1rem;
   }
 
-  @include marketing-pages($extraSelectors: ('.page-api', '.page-guide-cheatsheet'), $nestParentSelector: true) {
+  @include marketing-pages(
+      $extraSelectors: ('.page-api', '.page-file-not-found', '.page-guide-cheatsheet'),
+      $nestParentSelector: true) {
     max-width: none;
   }