From 8f1e9b8dcd28dfd0cf1d6f9f19b2cf6aa4aa04be Mon Sep 17 00:00:00 2001
From: Emily Jablonski <emijablonski@gmail.com>
Date: Wed, 4 Dec 2024 13:41:09 -0700
Subject: [PATCH 1/3] refactor: max width layout

---
 sites/public/src/layouts/max-width.module.scss | 13 +++++++++++++
 sites/public/src/layouts/max-width.tsx         | 15 +++++++++++++++
 2 files changed, 28 insertions(+)
 create mode 100644 sites/public/src/layouts/max-width.module.scss
 create mode 100644 sites/public/src/layouts/max-width.tsx

diff --git a/sites/public/src/layouts/max-width.module.scss b/sites/public/src/layouts/max-width.module.scss
new file mode 100644
index 0000000000..a54facc427
--- /dev/null
+++ b/sites/public/src/layouts/max-width.module.scss
@@ -0,0 +1,13 @@
+.layout-max-width-container {
+  margin-block: var(--seeds-s6);
+  padding-inline: var(--seeds-s4);
+
+  @media (--md-and-up) {
+    margin-block: var(--seeds-s12);
+  }
+}
+
+.layout-max-width-content {
+  max-width: var(--seeds-screen-lg);
+  margin: auto;
+}
diff --git a/sites/public/src/layouts/max-width.tsx b/sites/public/src/layouts/max-width.tsx
new file mode 100644
index 0000000000..4ebb6268f9
--- /dev/null
+++ b/sites/public/src/layouts/max-width.tsx
@@ -0,0 +1,15 @@
+import React from "react"
+import styles from "./max-width.module.scss"
+
+interface FormLayoutProps {
+  children: React.ReactNode
+}
+const MaxWidthLayout = (props: FormLayoutProps) => {
+  return (
+    <div className={styles["layout-max-width-container"]}>
+      <div className={styles["layout-max-width-content"]}>{props.children}</div>
+    </div>
+  )
+}
+
+export default MaxWidthLayout

From 8e3286721c5a48be64084c80c3912dcff621dce5 Mon Sep 17 00:00:00 2001
From: Emily Jablonski <emijablonski@gmail.com>
Date: Wed, 4 Dec 2024 13:51:26 -0700
Subject: [PATCH 2/3] fix: cleanup

---
 sites/public/src/layouts/max-width.module.scss |  4 ++++
 sites/public/src/pages/404.tsx                 |  7 ++++---
 sites/public/src/pages/_error.tsx              | 16 ++++++----------
 3 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/sites/public/src/layouts/max-width.module.scss b/sites/public/src/layouts/max-width.module.scss
index a54facc427..7ffbae9aeb 100644
--- a/sites/public/src/layouts/max-width.module.scss
+++ b/sites/public/src/layouts/max-width.module.scss
@@ -5,6 +5,10 @@
   @media (--md-and-up) {
     margin-block: var(--seeds-s12);
   }
+
+  p:not(:last-child) {
+    margin-block-end: var(--seeds-s4);
+  }
 }
 
 .layout-max-width-content {
diff --git a/sites/public/src/pages/404.tsx b/sites/public/src/pages/404.tsx
index f11c7c64f4..d130938bda 100644
--- a/sites/public/src/pages/404.tsx
+++ b/sites/public/src/pages/404.tsx
@@ -1,10 +1,11 @@
 import React, { useEffect, useContext } from "react"
 import Layout from "../layouts/application"
 import Head from "next/head"
-import { Hero, MarkdownSection, t } from "@bloom-housing/ui-components"
+import { Hero, t } from "@bloom-housing/ui-components"
 import { PageView, pushGtmEvent, AuthContext } from "@bloom-housing/shared-helpers"
 import { Button } from "@bloom-housing/ui-seeds"
 import { UserStatus } from "../lib/constants"
+import MaxWidthLayout from "../layouts/max-width"
 
 const ErrorPage = () => {
   const pageTitle = t("errors.notFound.title")
@@ -28,14 +29,14 @@ const ErrorPage = () => {
         {t("errors.notFound.message")}
       </Hero>
       <div className="homepage-extra">
-        <MarkdownSection fullwidth={true}>
+        <MaxWidthLayout>
           <>
             <p>{t("welcome.seeMoreOpportunities")}</p>
             <Button variant="primary-outlined" href="/additional-resources">
               {t("welcome.viewAdditionalHousing")}
             </Button>
           </>
-        </MarkdownSection>
+        </MaxWidthLayout>
       </div>
     </Layout>
   )
diff --git a/sites/public/src/pages/_error.tsx b/sites/public/src/pages/_error.tsx
index f11c7c64f4..f43c3945b5 100644
--- a/sites/public/src/pages/_error.tsx
+++ b/sites/public/src/pages/_error.tsx
@@ -1,10 +1,9 @@
 import React, { useEffect, useContext } from "react"
-import Layout from "../layouts/application"
-import Head from "next/head"
-import { Hero, MarkdownSection, t } from "@bloom-housing/ui-components"
+import { Hero, t } from "@bloom-housing/ui-components"
 import { PageView, pushGtmEvent, AuthContext } from "@bloom-housing/shared-helpers"
 import { Button } from "@bloom-housing/ui-seeds"
 import { UserStatus } from "../lib/constants"
+import MaxWidthLayout from "../layouts/max-width"
 
 const ErrorPage = () => {
   const pageTitle = t("errors.notFound.title")
@@ -20,24 +19,21 @@ const ErrorPage = () => {
   }, [profile])
 
   return (
-    <Layout>
-      <Head>
-        <title>{pageTitle}</title>
-      </Head>
+    <>
       <Hero title={pageTitle} buttonTitle={t("welcome.seeRentalListings")} buttonLink="/listings">
         {t("errors.notFound.message")}
       </Hero>
       <div className="homepage-extra">
-        <MarkdownSection fullwidth={true}>
+        <MaxWidthLayout>
           <>
             <p>{t("welcome.seeMoreOpportunities")}</p>
             <Button variant="primary-outlined" href="/additional-resources">
               {t("welcome.viewAdditionalHousing")}
             </Button>
           </>
-        </MarkdownSection>
+        </MaxWidthLayout>
       </div>
-    </Layout>
+    </>
   )
 }
 

From fe8848218f65f039108c44c0ca07a4432271b099 Mon Sep 17 00:00:00 2001
From: Emily Jablonski <emijablonski@gmail.com>
Date: Wed, 4 Dec 2024 13:56:20 -0700
Subject: [PATCH 3/3] fix: cleanup

---
 sites/public/src/layouts/max-width.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/sites/public/src/layouts/max-width.tsx b/sites/public/src/layouts/max-width.tsx
index 4ebb6268f9..1c2d7d9332 100644
--- a/sites/public/src/layouts/max-width.tsx
+++ b/sites/public/src/layouts/max-width.tsx
@@ -1,10 +1,11 @@
 import React from "react"
 import styles from "./max-width.module.scss"
 
-interface FormLayoutProps {
+interface MaxWidthLayoutProps {
   children: React.ReactNode
 }
-const MaxWidthLayout = (props: FormLayoutProps) => {
+
+const MaxWidthLayout = (props: MaxWidthLayoutProps) => {
   return (
     <div className={styles["layout-max-width-container"]}>
       <div className={styles["layout-max-width-content"]}>{props.children}</div>