From 1a014f30f0934dd69bc965356c98287aa5f4801e Mon Sep 17 00:00:00 2001
From: adilallo <39313955+adilallo@users.noreply.github.com>
Date: Wed, 19 Aug 2026 15:27:16 -0600
Subject: [PATCH] Let the content-page article column fill the 1440+ template
 gutters so it does not stay capped at 904px on wider viewports.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 app/(marketing)/_components/LegalDocumentPage.tsx | 4 ++--
 app/(marketing)/blog/[slug]/page.tsx              | 3 ++-
 app/(marketing)/how-it-works/page.tsx             | 4 ++--
 tests/pages/blog.test.jsx                         | 4 +++-
 4 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/app/(marketing)/_components/LegalDocumentPage.tsx b/app/(marketing)/_components/LegalDocumentPage.tsx
index 817b91a..5f6222b 100644
--- a/app/(marketing)/_components/LegalDocumentPage.tsx
+++ b/app/(marketing)/_components/LegalDocumentPage.tsx
@@ -17,7 +17,7 @@ type LegalDocumentPageProps = {
 const INLINE_LINK = /\[([^\]]+)\]\(([^)]+)\)/g;
 
 const ARTICLE_COLUMN_CLASS =
-  "mx-auto flex w-full flex-col gap-[var(--space-800,32px)] text-[var(--color-content-default-primary)] text-medium-paragraph sm:max-w-[390px] sm:text-large-paragraph md:max-w-[472px] lg:max-w-[700px] lg:text-x-large-paragraph xl:max-w-[904px] xl:text-xx-large-paragraph";
+  "mx-auto flex w-full flex-col gap-[var(--space-800,32px)] text-[var(--color-content-default-primary)] text-medium-paragraph sm:max-w-[390px] sm:text-large-paragraph md:max-w-[472px] lg:max-w-[700px] lg:text-x-large-paragraph xl:max-w-none xl:text-xx-large-paragraph";
 
 const LINK_CLASS = "underline decoration-solid underline-offset-2";
 
@@ -160,7 +160,7 @@ export default function LegalDocumentPage({
         />
 
         <article
-          className="relative z-10 flex w-full justify-center p-[var(--spacing-scale-024)] sm:px-0 sm:py-[var(--spacing-scale-032)]"
+          className="relative z-10 flex w-full justify-center p-[var(--spacing-scale-024)] sm:px-0 sm:py-[var(--spacing-scale-032)] xl:px-[calc(268/1440*100%)]"
           data-node-id="19003:23574"
         >
           <div className={ARTICLE_COLUMN_CLASS}>
diff --git a/app/(marketing)/blog/[slug]/page.tsx b/app/(marketing)/blog/[slug]/page.tsx
index 513849a..210bd55 100644
--- a/app/(marketing)/blog/[slug]/page.tsx
+++ b/app/(marketing)/blog/[slug]/page.tsx
@@ -216,9 +216,10 @@ export default async function BlogPostPage({ params }: PageProps) {
               relative z-10 flex w-full justify-center
               p-[var(--spacing-scale-024)]
               sm:px-0 sm:py-[var(--spacing-scale-032)]
+              xl:px-[calc(268/1440*100%)]
             "
           >
-            <div className="post-body w-full text-[var(--color-content-inverse-primary)] text-medium-paragraph sm:text-large-paragraph lg:text-x-large-paragraph xl:text-xx-large-paragraph sm:max-w-[390px] md:max-w-[472px] lg:max-w-[700px] xl:max-w-[904px]">
+            <div className="post-body w-full text-[var(--color-content-inverse-primary)] text-medium-paragraph sm:text-large-paragraph lg:text-x-large-paragraph xl:text-xx-large-paragraph sm:max-w-[390px] md:max-w-[472px] lg:max-w-[700px] xl:max-w-none">
               <div dangerouslySetInnerHTML={{ __html: post.htmlContent }} />
             </div>
           </article>
diff --git a/app/(marketing)/how-it-works/page.tsx b/app/(marketing)/how-it-works/page.tsx
index c49b409..e5b02b4 100644
--- a/app/(marketing)/how-it-works/page.tsx
+++ b/app/(marketing)/how-it-works/page.tsx
@@ -109,9 +109,9 @@ export default function HowItWorksPage() {
         <div className="relative w-full overflow-x-clip">
           <ContentTemplateDecorativeShapes variant="guide" />
 
-          <article className="relative z-10 p-[var(--spacing-scale-024)] sm:py-[var(--spacing-scale-032)]">
+          <article className="relative z-10 p-[var(--spacing-scale-024)] sm:py-[var(--spacing-scale-032)] xl:px-[calc(268/1440*100%)]">
             <div
-              className="post-body text-[var(--color-content-default-primary)] text-medium-paragraph sm:text-large-paragraph lg:text-x-large-paragraph xl:text-xx-large-paragraph sm:mx-auto sm:max-w-[390px] md:max-w-[472px] lg:max-w-[700px] xl:max-w-[904px]"
+              className="post-body text-[var(--color-content-default-primary)] text-medium-paragraph sm:text-large-paragraph lg:text-x-large-paragraph xl:text-xx-large-paragraph sm:mx-auto sm:max-w-[390px] md:max-w-[472px] lg:max-w-[700px] xl:max-w-none"
               dangerouslySetInnerHTML={{ __html: syntheticPost.htmlContent }}
             />
           </article>
diff --git a/tests/pages/blog.test.jsx b/tests/pages/blog.test.jsx
index 99dc103..d5c9fc0 100644
--- a/tests/pages/blog.test.jsx
+++ b/tests/pages/blog.test.jsx
@@ -286,10 +286,12 @@ describe("BlogPostPage", () => {
     const contentDiv = screen
       .getByText(/This is the article content/)
       .closest("div.post-body");
+    const article = contentDiv?.closest("article");
     expect(contentDiv).toHaveClass("sm:max-w-[390px]");
     expect(contentDiv).toHaveClass("md:max-w-[472px]");
     expect(contentDiv).toHaveClass("lg:max-w-[700px]");
-    expect(contentDiv).toHaveClass("xl:max-w-[904px]");
+    expect(contentDiv).toHaveClass("xl:max-w-none");
+    expect(article).toHaveClass("xl:px-[calc(268/1440*100%)]");
   });
 
   it("includes structured data scripts", async () => {