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 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}>
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
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>
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">
<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>
tests/pages/blog.test.jsx
+3 -1
View File
@@ -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 () => {