From 99c5c28a5185b18ba45946ff0dd1d44a725bf92c Mon Sep 17 00:00:00 2001
From: adilallo <39313955+adilallo@users.noreply.github.com>
Date: Wed, 19 Aug 2026 13:27:08 -0600
Subject: [PATCH] Cap Rule stack section titles at the Figma 3-line width so
 they wrap instead of stretching on wide viewports.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../type/SectionHeader/SectionHeader.tsx      |  4 +-
 tests/components/SectionHeader.test.tsx       | 37 +++++++++++++++++++
 2 files changed, 39 insertions(+), 2 deletions(-)

diff --git a/app/components/type/SectionHeader/SectionHeader.tsx b/app/components/type/SectionHeader/SectionHeader.tsx
index f3f72d1..6336a4f 100644
--- a/app/components/type/SectionHeader/SectionHeader.tsx
+++ b/app/components/type/SectionHeader/SectionHeader.tsx
@@ -68,8 +68,8 @@ const SectionHeader = memo<SectionHeaderProps>(
               variant === "multi-line"
                 ? ruleStackDesktopTypeScale
                   ? splitFromMd
-                    ? "font-bricolage-grotesque text-medium-heading text-[var(--color-content-default-primary)] md:w-full md:max-w-none md:text-left md:text-large-heading xl:text-xx-large-heading"
-                    : "font-bricolage-grotesque text-medium-heading md:text-large-heading lg:w-full lg:max-w-none lg:text-left lg:text-large-heading xl:text-xx-large-heading text-[var(--color-content-default-primary)]"
+                    ? "font-bricolage-grotesque text-medium-heading text-[var(--color-content-default-primary)] md:w-full md:max-w-[571px] md:text-left md:text-large-heading xl:text-xx-large-heading"
+                    : "font-bricolage-grotesque text-medium-heading md:text-large-heading lg:w-full lg:max-w-[571px] lg:text-left lg:text-large-heading xl:text-xx-large-heading text-[var(--color-content-default-primary)]"
                   : "font-bricolage-grotesque text-medium-heading md:text-large-heading lg:w-[410px] lg:text-left xl:text-xx-large-heading text-[var(--color-content-default-primary)]"
                 : "font-bricolage-grotesque text-medium-heading sm:text-large-heading lg:text-large-heading lg:w-[369px] lg:pr-[var(--spacing-scale-096)] xl:text-xx-large-heading xl:w-[452px] xl:pr-[var(--spacing-scale-096)] text-[var(--color-content-default-primary)]"
             }
diff --git a/tests/components/SectionHeader.test.tsx b/tests/components/SectionHeader.test.tsx
index fbfdbfc..66842e0 100644
--- a/tests/components/SectionHeader.test.tsx
+++ b/tests/components/SectionHeader.test.tsx
@@ -42,3 +42,40 @@ describe("SectionHeader twoColumnsFromMd", () => {
     expect(container.firstElementChild).toHaveClass("md:flex-row");
   });
 });
+
+describe("SectionHeader rule stack title max width", () => {
+  it("caps the title at the Figma 3-line width from lg", () => {
+    render(
+      <SectionHeader
+        title="Get Templates that help your community run smoothly"
+        subtitle="Start from a proven pattern."
+        variant="multi-line"
+        ruleStackDesktopTypeScale
+      />,
+    );
+
+    expect(
+      screen.getByRole("heading", {
+        name: /get templates that help your community run smoothly/i,
+      }),
+    ).toHaveClass("lg:max-w-[571px]");
+  });
+
+  it("caps the title at the Figma 3-line width from md when twoColumnsFromMd is set", () => {
+    render(
+      <SectionHeader
+        title="Get Templates that help your community run smoothly"
+        subtitle="Start from a proven pattern."
+        variant="multi-line"
+        ruleStackDesktopTypeScale
+        twoColumnsFromMd
+      />,
+    );
+
+    expect(
+      screen.getByRole("heading", {
+        name: /get templates that help your community run smoothly/i,
+      }),
+    ).toHaveClass("md:max-w-[571px]");
+  });
+});