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>

app/(app)/create/components/ApplicableScopeField.tsx

@@ -84,6 +84,7 @@ function ApplicableScopeFieldComponent({
               disabled={readOnly}
               onClick={() => !readOnly && onToggleScope(scope)}
               ariaLabel={`${isSelected ? "Deselect" : "Select"} ${scope}`}
+              className="max-w-full"
             />
           );
         })}

app/(app)/create/components/FinalReviewChipEditModal.tsx

@@ -35,6 +35,10 @@ import {
   decisionApproachPresetFor,
   membershipPresetFor,
 } from "../../../../lib/create/finalReviewChipPresets";
+import {
+  applyDecisionApproachKeyResources,
+  selectedKeyResourceLabelsFromCheckedIds,
+} from "../../../../lib/create/decisionApproachKeyResources";
 import { isCustomMethodCardId } from "../../../../lib/create/isCustomMethodCardId";
 import { usesWizardFieldBlocksModalBody } from "../../../../lib/create/usesWizardFieldBlocksModalBody";
 import type { CustomMethodCardFieldBlock } from "../../../../lib/create/customMethodCardFieldBlocks";
@@ -1266,6 +1270,7 @@ function facetSeedSignature(
       return JSON.stringify({
         meta: state.customMethodCardMetaById?.[id] ?? null,
         details: state.decisionApproachDetailsById?.[id] ?? null,
+        keyResources: state.selectedDecisionKeyResourceIds ?? null,
         blocks: state.customMethodCardFieldBlocksById?.[id] ?? null,
       });
     case "conflictManagement":
@@ -1330,12 +1335,18 @@ function seedDraftForTarget(
       const saved =
         state.decisionApproachDetailsById?.[target.overrideKey] ??
         decisionApproachPresetFor(target.overrideKey);
+      const withKeys = applyDecisionApproachKeyResources(
+        saved,
+        selectedKeyResourceLabelsFromCheckedIds(
+          state.selectedDecisionKeyResourceIds ?? [],
+        ),
+      );
       return {
         groupKey: "decisionApproaches",
         value: {
-          ...saved,
-          applicableScope: [...saved.applicableScope],
-          selectedApplicableScope: [...saved.selectedApplicableScope],
+          ...withKeys,
+          applicableScope: [...withKeys.applicableScope],
+          selectedApplicableScope: [...withKeys.selectedApplicableScope],
         },
       };
     }

app/(app)/create/components/methodEditFields/DecisionApproachEditFields.tsx

@@ -7,12 +7,13 @@
  * `markCreateFlowInteraction` live in the parent.
  */
 
-import { memo, useCallback } from "react";
+import { memo, useCallback, useMemo } from "react";
 import { useMessages } from "../../../../contexts/MessagesContext";
 import ModalTextAreaField from "../ModalTextAreaField";
 import ApplicableScopeField from "../ApplicableScopeField";
 import IncrementerBlock from "../../../../components/controls/IncrementerBlock";
 import type { DecisionApproachDetailEntry } from "../../types";
+import { withDecisionApproachKeyResourceScopes } from "../../../../../lib/create/decisionApproachKeyResources";
 
 export interface DecisionApproachEditFieldsProps {
   value: DecisionApproachDetailEntry;
@@ -32,6 +33,11 @@ function DecisionApproachEditFieldsComponent({
   const m = useMessages();
   const t = m.create.customRule.decisionApproaches;
 
+  const scopes = useMemo(
+    () => withDecisionApproachKeyResourceScopes(value.applicableScope),
+    [value.applicableScope],
+  );
+
   const patch = useCallback(
     <K extends keyof DecisionApproachDetailEntry>(
       key: K,
@@ -53,7 +59,7 @@ function DecisionApproachEditFieldsComponent({
       <ApplicableScopeField
         label={t.sectionHeadings.applicableScope}
         addLabel={t.scopeAddButtonLabel}
-        scopes={value.applicableScope}
+        scopes={scopes}
         selectedScopes={value.selectedApplicableScope}
         readOnly={readOnly}
         onToggleScope={(scope) =>