CommunityRule/community-rule
2
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Let the content-page article column fill the 1440+ template gutters so it does not stay capped at 904px on wider viewports.

Browse Source 
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
adilallo
2026-08-19 15:27:16 -06:00
co-authored by Cursor
parent f35889f966
commit 1a014f30f0
4 changed files with 9 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/(marketing)/_components/LegalDocumentPage.tsx
+2 -2
View File
@@ -17,7 +17,7 @@ type LegalDocumentPageProps = {
const INLINE_LINK = /\[([^\]]+)\]\(([^)]+)\)/g; const INLINE_LINK = /\[([^\]]+)\]\(([^)]+)\)/g;
const ARTICLE_COLUMN_CLASS = 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"; const LINK_CLASS = "underline decoration-solid underline-offset-2";
@@ -160,7 +160,7 @@ export default function LegalDocumentPage({
/> />
<article <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" data-node-id="19003:23574"
> >
<div className={ARTICLE_COLUMN_CLASS}> <div className={ARTICLE_COLUMN_CLASS}>
app/(marketing)/blog/[slug]/page.tsx
+2 -1
View File
@@ -216,9 +216,10 @@ export default async function BlogPostPage({ params }: PageProps) {
relative z-10 flex w-full justify-center relative z-10 flex w-full justify-center
p-[var(--spacing-scale-024)] p-[var(--spacing-scale-024)]
sm:px-0 sm:py-[var(--spacing-scale-032)] 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 dangerouslySetInnerHTML={{ __html: post.htmlContent }} />
</div> </div>
</article> </article>
app/(marketing)/how-it-works/page.tsx
+2 -2
View File
@@ -109,9 +109,9 @@ export default function HowItWorksPage() {
<div className="relative w-full overflow-x-clip"> <div className="relative w-full overflow-x-clip">
<ContentTemplateDecorativeShapes variant="guide" /> <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 <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 }} dangerouslySetInnerHTML={{ __html: syntheticPost.htmlContent }}
/> />
</article> </article>
tests/pages/blog.test.jsx
+3 -1
View File
@@ -286,10 +286,12 @@ describe("BlogPostPage", () => {
const contentDiv = screen const contentDiv = screen
.getByText(/This is the article content/) .getByText(/This is the article content/)
.closest("div.post-body"); .closest("div.post-body");
const article = contentDiv?.closest("article");
expect(contentDiv).toHaveClass("sm:max-w-[390px]"); expect(contentDiv).toHaveClass("sm:max-w-[390px]");
expect(contentDiv).toHaveClass("md:max-w-[472px]"); expect(contentDiv).toHaveClass("md:max-w-[472px]");
expect(contentDiv).toHaveClass("lg:max-w-[700px]"); 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 () => { it("includes structured data scripts", async () => {