From 44dde66b087f1498f6ff71041fc1956a6f1f0eca Mon Sep 17 00:00:00 2001
From: Gabe Kangas <gabek@real-ity.com>
Date: Sun, 14 Aug 2022 18:33:04 -0700
Subject: [PATCH] Reduce the custom content width and center it. For #1860

---
 .../CustomPageContent.module.scss                 | 15 ++++++++++++++-
 .../ui/CustomPageContent/CustomPageContent.tsx    |  6 +++++-
 2 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/web/components/ui/CustomPageContent/CustomPageContent.module.scss b/web/components/ui/CustomPageContent/CustomPageContent.module.scss
index c89550b4a..dca2a3bd7 100644
--- a/web/components/ui/CustomPageContent/CustomPageContent.module.scss
+++ b/web/components/ui/CustomPageContent/CustomPageContent.module.scss
@@ -1,12 +1,25 @@
+@import 'styles/mixins.scss';
+
+.pageContentContainer {
+  @include flexCenter;
+}
+
 .customPageContent {
   font-size: 16px;
   line-height: 1.5em;
   margin: 0;
   padding: 0;
+  width: 80%;
+  max-width: 1200px;
 
   color: var(--theme-text);
   background-color: var(--theme-background-secondary);
-  padding: 0.175em 1em;
+  padding: 1em;
+
+  // Allow the content to fill the width on narrow screens.
+  @media only screen and (max-width: 768px) {
+    width: 100%;
+  }
 
   hr {
     margin: 1.35em 0;
diff --git a/web/components/ui/CustomPageContent/CustomPageContent.tsx b/web/components/ui/CustomPageContent/CustomPageContent.tsx
index 28756d055..79e619d0c 100644
--- a/web/components/ui/CustomPageContent/CustomPageContent.tsx
+++ b/web/components/ui/CustomPageContent/CustomPageContent.tsx
@@ -7,5 +7,9 @@ interface Props {
 export default function CustomPageContent(props: Props) {
   const { content } = props;
   // eslint-disable-next-line react/no-danger
-  return <div className={s.customPageContent} dangerouslySetInnerHTML={{ __html: content }} />;
+  return (
+    <div className={s.pageContentContainer}>
+      <div className={s.customPageContent} dangerouslySetInnerHTML={{ __html: content }} />
+    </div>
+  );
 }