Standardize create-flow option steps on one question-and-options layout and Selection sizes.

Method cards, chips, and the right rail now share the two-column shell; last options clear the footer fade, See all stays under the stack, and the left heading no longer jumps when the list expands.

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

stories/cards/Selection.stories.js

@@ -1,4 +1,5 @@
 import Selection from "../../app/components/cards/Selection";
+import { SELECTION_SIZE_OPTIONS } from "../../lib/propNormalization";
 
 export default {
   title: "Components/Cards/Selection",
@@ -8,7 +9,7 @@ export default {
     docs: {
       description: {
         component:
-          "Create flow selection card with support text, recommended/selected states, and horizontal or vertical orientation. Use for communication approaches and similar choices.",
+          "Selectable option with size variants: `s` (chip), `m` (compact tile), and `l` (full-width row). Used in the create-flow question-and-options layout.",
       },
     },
   },
@@ -29,10 +30,15 @@ export default {
       control: { type: "boolean" },
       description: "Show black SELECTED pill and dotted border",
     },
+    size: {
+      control: { type: "select" },
+      options: [...SELECTION_SIZE_OPTIONS],
+      description: "s = chip, m = compact tile, l = full-width row",
+    },
     orientation: {
       control: { type: "select" },
       options: ["horizontal", "vertical"],
-      description: "Layout orientation",
+      description: "Legacy layout flag. Prefer size (`horizontal` → m, `vertical` → l).",
     },
     showInfoIcon: {
       control: { type: "boolean" },
@@ -50,11 +56,21 @@ export const Default = {
     supportText: "Members vote to resolve a dispute democratically.",
     recommended: true,
     selected: false,
-    orientation: "horizontal",
+    size: "m",
     showInfoIcon: false,
   },
 };
 
+export const SizeChip = {
+  args: {
+    label: "Worker-owned",
+    supportText: "Hidden on the chip; used for the accessible name.",
+    recommended: false,
+    selected: false,
+    size: "s",
+  },
+};
+
 export const HorizontalRecommended = {
   args: {
     label: "Label",