Performance follow-ups

tests/pages/learn.test.tsx

@@ -82,32 +82,29 @@ describe("LearnPage", () => {
     expect(screen.getByText("Still have questions?")).toBeInTheDocument();
   });
 
-  it("renders one card per post in each layout region without duplication", () => {
+  it("renders one card per post (single responsive grid, no duplication)", () => {
     const { container } = render(<LearnPage />);
 
-    const mobileRegion = container.querySelector(".smd\\:hidden");
-    const desktopRegion = container.querySelector(".smd\\:grid");
+    const grid = container.querySelector(".smd\\:grid");
+    expect(grid).toBeTruthy();
 
-    expect(mobileRegion).toBeTruthy();
-    expect(desktopRegion).toBeTruthy();
+    const links = within(grid as HTMLElement).getAllByRole("link");
+    expect(links).toHaveLength(mockPosts.length);
 
-    const mobileLinks = within(mobileRegion as HTMLElement).getAllByRole(
-      "link",
-    );
-    const desktopLinks = within(desktopRegion as HTMLElement).getAllByRole(
-      "link",
-    );
-
-    expect(mobileLinks).toHaveLength(mockPosts.length);
-    expect(desktopLinks).toHaveLength(mockPosts.length);
-
-    expect(mobileLinks[0]).toHaveAttribute(
+    expect(links[0]).toHaveAttribute(
       "href",
       "/blog/resolving-active-conflicts",
     );
-    expect(desktopLinks[1]).toHaveAttribute(
+    expect(links[1]).toHaveAttribute(
       "href",
       "/blog/operational-security-mutual-aid",
     );
+
+    // <picture> with a smd source provides the orientation swap without a
+    // duplicate card per breakpoint.
+    const sources = grid?.querySelectorAll(
+      "picture source[media='(min-width: 530px)']",
+    );
+    expect(sources?.length).toBe(mockPosts.length);
   });
 });

tests/unit/Layout.test.jsx

@@ -128,12 +128,24 @@ describe("Group layouts (chrome composition)", () => {
       findDescendant(main, (n) => typeof n === "string" && n.includes("marketing-child")),
     ).toBeTruthy();
 
-    // Footer is loaded via next/dynamic — it appears as a render prop component
-    // sibling to <main>. Verify the layout returns more than just <main>.
-    const childrenArr = Array.isArray(tree.props.children)
-      ? tree.props.children
-      : [tree.props.children];
-    expect(childrenArr.length).toBeGreaterThan(1);
+    // Footer is a next/dynamic component sibling to <main>. Find the node
+    // whose children include <main>, then assert its sibling list also
+    // contains a third element (the Footer dynamic component) — independent
+    // of where MessagesProvider/AuthModalProvider sit in the tree.
+    const mainSiblingParent = findDescendant(tree, (n) => {
+      const ch = Array.isArray(n?.props?.children)
+        ? n.props.children
+        : [n?.props?.children].filter(Boolean);
+      return ch.some(
+        (c) =>
+          c?.type === "main" && c.props?.className?.includes("flex-1"),
+      );
+    });
+    expect(mainSiblingParent).toBeTruthy();
+    const siblings = Array.isArray(mainSiblingParent.props.children)
+      ? mainSiblingParent.props.children
+      : [mainSiblingParent.props.children];
+    expect(siblings.length).toBeGreaterThan(1);
   });
 
   test("AppLayout wraps children in <main flex-1> with no footer", () => {