From 3470ea17d561b038e2de84cdeb599a2fbf9734e3 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 da2acbcada..880e42cda2 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 63dc42416e..b64103fa32 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;
   }