Clip content-template ornaments at the frame so they do not overlap copy.

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-08-18 22:11:02 -06:00
parent 63842b31c8
commit 6820315aaa
6 changed files with 143 additions and 112 deletions
@@ -63,4 +63,33 @@ describe("HowItWorksPage", () => {
      screen.getByText(/mutual aid network, manage an open-source project/),
    ).toBeInTheDocument();
  });
+
+  test("clips body ornaments at the page frame and keeps them behind copy", () => {
+    const { container } = render(<HowItWorksPage />);
+
+    const page = container.querySelector("div.min-h-screen");
+    expect(page).toHaveClass("overflow-x-clip");
+
+    const right = container.querySelector('[data-node-id="19003:23575"]');
+    const left = container.querySelector('[data-node-id="19003:23576"]');
+    expect(right).toHaveClass(
+      "z-0",
+      "left-[87.19%]",
+      "right-0",
+      "top-[266px]",
+      "lg:left-[84.86%]",
+      "lg:top-[255px]",
+    );
+    expect(left).toHaveClass("z-0", "left-0", "right-[88.38%]", "top-[811px]");
+
+    const rightImg = right?.querySelector("img");
+    const leftImg = left?.querySelector("img");
+    expect(rightImg).toHaveAttribute(
+      "src",
+      "/assets/shapes/how-shape-2.svg",
+    );
+    expect(leftImg).toHaveAttribute("src", "/assets/shapes/how-shape-1.svg");
+    expect(rightImg).toHaveClass("object-contain");
+    expect(leftImg).toHaveClass("object-contain");
+  });
 });