Scale About Header inline marks to the 320, 640, and 1440 variants so the 1440 sizes do not apply from tablet up.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
adilallo
2026-08-19 19:01:37 -06:00
co-authored by Cursor
parent 75c5ae61b0
commit 3c7fca83b2
5 changed files with 33 additions and 11 deletions
@@ -17,4 +17,30 @@ describe("AboutHeader", () => {
screen.getByRole("heading", { name: /CommunityRule helps/i }),
).toBeInTheDocument();
});
it("sizes inline marks to the 320 / 640 / 1440 About Header variants", () => {
const { container } = render(
<AboutHeader
segments={[
{ type: "word", text: "CommunityRule" },
{ type: "icon", icon: "arrow" },
{ type: "word", text: "groups" },
{ type: "icon", icon: "about" },
]}
/>,
);
const heading = screen.getByRole("heading");
expect(heading.className).toContain("gap-[var(--spacing-scale-010)]");
expect(heading.className).toContain("xl:gap-[var(--spacing-scale-012)]");
const marks = container.querySelectorAll("h1 span.inline-flex");
expect(marks).toHaveLength(2);
expect(marks[0]?.className).toContain("size-[32px]");
expect(marks[0]?.className).toContain("md:size-[64px]");
expect(marks[0]?.className).toContain("xl:size-[80px]");
expect(marks[1]?.className).toContain("size-[29px]");
expect(marks[1]?.className).toContain("md:size-[58px]");
expect(marks[1]?.className).toContain("xl:size-[80px]");
});
});