Update create flow pages

tests/pages/right-rail.test.jsx

@@ -6,7 +6,7 @@ import {
 } from "../utils/test-utils";
 import userEvent from "@testing-library/user-event";
 import { describe, test, expect, afterEach } from "vitest";
-import RightRailPage from "../../app/create/right-rail/page";
+import { RightRailScreen } from "../../app/create/screens/right-rail/RightRailScreen";
 
 afterEach(() => {
   cleanup();
@@ -14,7 +14,7 @@ afterEach(() => {
 
 describe("Create flow right-rail page", () => {
   test("renders without error", () => {
-    render(<RightRailPage />);
+    render(<RightRailScreen />);
 
     expect(
       screen.getByRole("heading", {
@@ -24,7 +24,7 @@ describe("Create flow right-rail page", () => {
   });
 
   test("renders sidebar description with add link", () => {
-    render(<RightRailPage />);
+    render(<RightRailScreen />);
 
     const description = screen.getByText((content, element) => {
       if (element?.tagName !== "P") return false;
@@ -39,7 +39,7 @@ describe("Create flow right-rail page", () => {
   });
 
   test("renders message box with title and checkboxes", () => {
-    render(<RightRailPage />);
+    render(<RightRailScreen />);
 
     const region = screen.getByRole("region", {
       name: "Consider defining approaches to steward key resources:",
@@ -65,7 +65,7 @@ describe("Create flow right-rail page", () => {
   });
 
   test("renders card stack with See all decision approaches toggle", () => {
-    render(<RightRailPage />);
+    render(<RightRailScreen />);
 
     expect(
       screen.getByRole("button", { name: "See all decision approaches" }),
@@ -73,7 +73,7 @@ describe("Create flow right-rail page", () => {
   });
 
   test("renders recommended approach cards", () => {
-    render(<RightRailPage />);
+    render(<RightRailScreen />);
 
     expect(
       screen.getByRole("button", {
@@ -94,7 +94,7 @@ describe("Create flow right-rail page", () => {
 
   test("toggle expands and shows Show less", async () => {
     const user = userEvent.setup();
-    render(<RightRailPage />);
+    render(<RightRailScreen />);
 
     const toggle = screen.getByRole("button", {
       name: "See all decision approaches",
@@ -108,7 +108,7 @@ describe("Create flow right-rail page", () => {
 
   test("expanded view shows Label cards", async () => {
     const user = userEvent.setup();
-    render(<RightRailPage />);
+    render(<RightRailScreen />);
 
     const toggle = screen.getByRole("button", {
       name: "See all decision approaches",
@@ -121,7 +121,7 @@ describe("Create flow right-rail page", () => {
 
   test("clicking a card toggles selection", async () => {
     const user = userEvent.setup();
-    render(<RightRailPage />);
+    render(<RightRailScreen />);
 
     const mediationCard = screen.getByRole("button", {
       name: /Mediation: Collaborative work to reach a resolution/,
@@ -133,7 +133,7 @@ describe("Create flow right-rail page", () => {
 
   test("message box checkboxes are interactive", async () => {
     const user = userEvent.setup();
-    render(<RightRailPage />);
+    render(<RightRailScreen />);
 
     const amendCheckbox = screen.getByRole("checkbox", {
       name: "Amend your CommunityRule",