Let completed-rule titles scroll away on small screens.

The heading still stays in the left column on desktop; on mobile it
moves with the document instead of pinning to the top of the viewport.

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

tests/pages/use-cases-completed-rule.test.jsx

@@ -90,6 +90,20 @@ describe("UseCaseCompletedRulePage", () => {
     },
   );
 
+  test("title column is sticky from md up only", async () => {
+    const fixture = messages.pages.useCasesCompletedRules.foodNotBombs;
+    render(
+      await UseCaseCompletedRulePage({
+        params: Promise.resolve({ slug: "food-not-bombs" }),
+      }),
+    );
+
+    const heading = screen.getByRole("heading", { name: fixture.title });
+    const column = heading.closest("div[class*='md:sticky']");
+    expect(column).toBeTruthy();
+    expect(column.className).not.toMatch(/\bmax-md:sticky\b/);
+  });
+
   test("marketing message bundle resolves Share (not the dotted create.topNav key)", () => {
     expect(getTranslation(marketingMessages, "create.topNav.share")).toBe(
       "Share",