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/components/CompletedPage.test.tsx

@@ -67,6 +67,24 @@ describe("CompletedScreen", () => {
     expect(screen.queryByText("Values")).not.toBeInTheDocument();
   });
 
+  it("does not pin the title on small screens", () => {
+    sessionStorage.setItem(
+      CREATE_FLOW_LAST_PUBLISHED_KEY,
+      JSON.stringify(storedRuleFixture),
+    );
+    render(<CompletedScreen />);
+    const heading = screen.getByRole("heading", {
+      name: "Fixture Community Rule",
+    });
+    const column = heading.closest("div[class*='md:justify-center']");
+    expect(column).toBeTruthy();
+    expect(column.className).not.toMatch(/\bsticky\b/);
+    const ruleColumn = screen
+      .getByText("Fixture value title")
+      .closest("div[class*='md:overflow-y-auto']");
+    expect(ruleColumn?.className).toMatch(/max-md:shrink-0/);
+  });
+
   it("renders header and document from sessionStorage", () => {
     sessionStorage.setItem(
       CREATE_FLOW_LAST_PUBLISHED_KEY,