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>
2026-08-19 13:27:08 -06:00
parent a525b12b5c
commit 99c5c28a51
2 changed files with 39 additions and 2 deletions
@@ -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]");
+  });
+});