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

Co-authored-by: Cursor <cursoragent@cursor.com>

tests/pages/blog.test.jsx

@@ -88,15 +88,15 @@ vi.mock("../../app/components/sections/AskOrganizer", () => {
 });
 
 // Mock asset utils
-vi.mock("../../lib/assetUtils", () => ({
-  getAssetPath: vi.fn((asset) =>
-    asset.startsWith("/") ? asset : `/${asset}`,
-  ),
-  ASSETS: {
-    CONTENT_SHAPE_1: "assets/shapes/content-shape-1.svg",
-    CONTENT_SHAPE_2: "assets/shapes/content-shape-2.svg",
-  },
-}));
+vi.mock("../../lib/assetUtils", async (importOriginal) => {
+  const actual = await importOriginal();
+  return {
+    ...actual,
+    getAssetPath: vi.fn((asset) =>
+      asset.startsWith("/") ? asset : `/${asset}`,
+    ),
+  };
+});
 
 // Mock blog post data
 const mockPost = {
@@ -238,6 +238,8 @@ describe("BlogPostPage", () => {
     // Check shape sources
     expect(shapes[0]).toHaveAttribute("src", "/assets/shapes/content-shape-1.svg");
     expect(shapes[1]).toHaveAttribute("src", "/assets/shapes/content-shape-2.svg");
+    expect(shapes[0]).toHaveClass("object-contain");
+    expect(shapes[1]).toHaveClass("object-contain");
   });
 
   it("applies correct styling to article content", async () => {
@@ -349,29 +351,33 @@ describe("BlogPostPage", () => {
 
     const shapes = screen.getAllByAltText("");
 
-    // First shape (right side)
     const rightShape = shapes[0].closest("div");
     expect(rightShape).toHaveClass(
       "hidden",
       "md:block",
       "absolute",
-      "top-1/4",
-      "right-0",
       "pointer-events-none",
-      "z-10",
+      "z-0",
+      "top-[266px]",
+      "lg:top-[255px]",
+      "left-[87.19%]",
+      "lg:left-[84.86%]",
     );
+    expect(rightShape).not.toHaveClass("z-10");
+    expect(rightShape).not.toHaveClass("top-1/4");
 
-    // Second shape (left side)
     const leftShape = shapes[1].closest("div");
     expect(leftShape).toHaveClass(
       "hidden",
       "md:block",
       "absolute",
-      "top-1/2",
-      "left-0",
       "pointer-events-none",
-      "z-10",
+      "z-0",
+      "top-[811px]",
+      "left-[-1.66%]",
     );
+    expect(leftShape).not.toHaveClass("z-10");
+    expect(leftShape).not.toHaveClass("top-1/2");
   });
 
   it("handles malformed post data gracefully", async () => {

tests/pages/how-it-works.test.jsx

@@ -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");
+  });
 });