Let decision-approaches wrap at narrow widths and sync key-resource scopes.

The info-box checkboxes overflowed in a squeezed column; wrapping them and offering those scopes as chips on every approach keeps the sidebar and Applicable Scope selection in sync without publishing unchecked keys as defaults.

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

tests/pages/decision-approaches.test.jsx

@@ -272,4 +272,91 @@ describe("Create flow decision-approaches page", () => {
     await user.click(amendCheckbox);
     expect(amendCheckbox).toBeChecked();
   });
+
+  test("each approach modal includes the key-resource applicable-scope chips", async () => {
+    const user = userEvent.setup();
+    render(<DecisionApproachesScreen />);
+
+    await user.click(
+      screen.getByRole("button", {
+        name: /Lazy Consensus: A decision is assumed approved/,
+      }),
+    );
+    const dialog = await screen.findByRole("dialog");
+    expect(
+      within(dialog).getByRole("button", {
+        name: "Select Amend your CommunityRule",
+      }),
+    ).toBeInTheDocument();
+    expect(
+      within(dialog).getByRole("button", { name: "Select Steward finances" }),
+    ).toBeInTheDocument();
+    expect(
+      within(dialog).getByRole("button", {
+        name: "Select Project level decisions",
+      }),
+    ).toBeInTheDocument();
+    expect(
+      within(dialog).getByRole("button", {
+        name: "Select Discipline and member termination",
+      }),
+    ).toBeInTheDocument();
+  });
+
+  test("checking a key-resource box selects that chip on every approach", async () => {
+    const user = userEvent.setup();
+    render(<DecisionApproachesScreen />);
+
+    await user.click(
+      screen.getByRole("checkbox", { name: "Steward finances" }),
+    );
+
+    await user.click(
+      screen.getByRole("button", {
+        name: /Lazy Consensus: A decision is assumed approved/,
+      }),
+    );
+    const lazyDialog = await screen.findByRole("dialog");
+    expect(
+      within(lazyDialog).getByRole("button", {
+        name: "Deselect Steward finances",
+      }),
+    ).toBeInTheDocument();
+    await user.click(within(lazyDialog).getByRole("button", { name: "Close dialog" }));
+
+    await user.click(
+      screen.getByRole("button", {
+        name: /Do-ocracy: Decisions are made by those who take initiative/,
+      }),
+    );
+    const doocracyDialog = await screen.findByRole("dialog");
+    expect(
+      within(doocracyDialog).getByRole("button", {
+        name: "Deselect Steward finances",
+      }),
+    ).toBeInTheDocument();
+  });
+
+  test("choosing a key-resource chip checks the matching sidebar box", async () => {
+    const user = userEvent.setup();
+    render(<DecisionApproachesScreen />);
+
+    await user.click(
+      screen.getByRole("button", {
+        name: /Lazy Consensus: A decision is assumed approved/,
+      }),
+    );
+    const dialog = await screen.findByRole("dialog");
+    await user.click(
+      within(dialog).getByRole("button", {
+        name: "Select Discipline and member termination",
+      }),
+    );
+
+    expect(
+      screen.getByRole("checkbox", {
+        name: "Discipline and member termination",
+      }),
+    ).toBeChecked();
+  });
 });