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>

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

@@ -1,56 +0,0 @@
-"use client";
-
-import type { ReactNode } from "react";
-import { CreateFlowHeaderLockup } from "./CreateFlowHeaderLockup";
-import { CreateFlowStepShell } from "./CreateFlowStepShell";
-import {
-  CREATE_FLOW_CARD_STACK_AREA_MAX_CLASS,
-  CREATE_FLOW_MD_CENTERED_SHELL_CLASS,
-  CREATE_FLOW_MD_UP_COLUMN_MAX_CLASS,
-  CREATE_FLOW_WIDE_MAX_CLASS,
-} from "./createFlowLayoutTokens";
-
-type CreateFlowCardStackStepShellProps = {
-  lockupTitle: string;
-  lockupDescription?: ReactNode;
-  /** When true, the stack region exposes `aria-busy` while recommendations load. */
-  stackBusy?: boolean;
-  children: ReactNode;
-};
-
-/**
- * Centered lockup + card-stack layout shared by communication, membership, and
- * conflict-management steps (Figma compact card stack).
- */
-export function CreateFlowCardStackStepShell({
-  lockupTitle,
-  lockupDescription,
-  stackBusy = false,
-  children,
-}: CreateFlowCardStackStepShellProps) {
-  return (
-    <CreateFlowStepShell
-      variant="wideGridLoosePadding"
-      contentTopBelowMd="space-800"
-      className={CREATE_FLOW_MD_CENTERED_SHELL_CLASS}
-    >
-      <div
-        className={`flex w-full min-w-0 flex-col items-center gap-6 ${CREATE_FLOW_WIDE_MAX_CLASS}`}
-      >
-        <div className={CREATE_FLOW_MD_UP_COLUMN_MAX_CLASS}>
-          <CreateFlowHeaderLockup
-            title={lockupTitle}
-            description={lockupDescription}
-            justification="center"
-          />
-        </div>
-        <div
-          className={CREATE_FLOW_CARD_STACK_AREA_MAX_CLASS}
-          aria-busy={stackBusy}
-        >
-          {children}
-        </div>
-      </div>
-    </CreateFlowStepShell>
-  );
-}

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

@@ -7,6 +7,7 @@ import {
 } from "./CreateFlowStepShell";
 import {
   CREATE_FLOW_MD_UP_COLUMN_MAX_CLASS,
+  CREATE_FLOW_SCROLL_END_PAD_CLASS,
   CREATE_FLOW_SCROLL_REGION_CLASS,
   CREATE_FLOW_TWO_COLUMN_MAX_WIDTH_CLASS,
 } from "./createFlowLayoutTokens";
@@ -23,15 +24,17 @@ interface CreateFlowTwoColumnSelectShellProps {
   contentTopBelowMd?: CreateFlowContentTopBelowMd;
   /**
    * At `lg+`, layout variant: `"center"` = vertically centered pair (community size/structure).
-   * `"start"` = top-weighted layout with a scrollable right column (core values, right-rail): uses `items-stretch`
-   * so the right column gets a bounded height; `items-start` would grow with content and break scroll.
+   * `"start"` = full-height split with a scrollable right column (core values, method cards,
+   * right-rail). Both columns stretch so the left lockup stays in one place when the right
+   * list grows (Figma Flow — Right Rail / Expanded Card Stack). The lockup is centered in
+   * the left pane; `items-start` on the row would let the title track card-stack height.
    */
   lgVerticalAlign?: CreateFlowSelectShellLgVerticalAlign;
 }
 
 /**
  * Question-and-options layout for create-flow select steps (community size/structure,
- * core values, stakeholders) and {@link DecisionApproachesScreen}.
+ * core values, stakeholders), method-card steps, and {@link DecisionApproachesScreen}.
  * Below `lg` (1024px), one column uses available width and main scrolls.
  * At `lg+`, static header column + scrollable options column (`min-h-0` + overflow).
  */
@@ -45,9 +48,6 @@ export function CreateFlowTwoColumnSelectShell({
   const rowLgCrossAlignClass =
     lgVerticalAlign === "start" ? "lg:items-stretch" : "lg:items-center";
 
-  const leftLgMainJustifyClass =
-    lgVerticalAlign === "start" ? "lg:justify-start" : "lg:justify-center";
-
   return (
     <CreateFlowStepShell
       variant="centeredNarrow"
@@ -68,7 +68,7 @@ export function CreateFlowTwoColumnSelectShell({
         <div
           className={
             `flex w-full min-w-0 shrink-0 flex-col items-start gap-[var(--measures-spacing-200,8px)] ` +
-            `lg:flex-1 ${leftLgMainJustifyClass} lg:py-[12px] ${CREATE_FLOW_MD_UP_COLUMN_MAX_CLASS}`
+            `lg:flex-1 lg:justify-center lg:py-[12px] ${CREATE_FLOW_MD_UP_COLUMN_MAX_CLASS}`
           }
         >
           {header}
@@ -76,7 +76,7 @@ export function CreateFlowTwoColumnSelectShell({
         <div
           className={
             `relative flex w-full min-w-0 flex-col items-start gap-[var(--measures-spacing-800,32px)] ` +
-            `overflow-x-hidden lg:min-h-0 lg:flex-1 lg:overflow-y-auto lg:pb-[var(--measures-spacing-300,12px)] ` +
+            `overflow-x-hidden lg:min-h-0 lg:flex-1 lg:overflow-y-auto ${CREATE_FLOW_SCROLL_END_PAD_CLASS} ` +
             `${CREATE_FLOW_SCROLL_REGION_CLASS} ${CREATE_FLOW_MD_UP_COLUMN_MAX_CLASS}`
           }
         >

app/(app)/create/components/createFlowLayoutTokens.ts

@@ -31,6 +31,12 @@ export const CREATE_FLOW_SCROLL_REGION_CLASS = "scrollbar-design";
 export const CREATE_FLOW_FOOTER_SCRIM_CLASS =
   "pointer-events-none absolute inset-x-0 top-0 z-[1] h-8 -translate-y-full bg-gradient-to-t from-[var(--color-surface-default-primary,#000)] to-transparent";
 
+/**
+ * Bottom padding in create-flow option scrollports so the last control can
+ * rest above the footer scrim (`h-8`) instead of sitting in the fade.
+ */
+export const CREATE_FLOW_SCROLL_END_PAD_CLASS = "pb-12";
+
 /**
  * Single column: full width below `lg` so tablet widths use available space;
  * 640px from `--breakpoint-lg` up (two-column layouts start at `lg`).
@@ -46,7 +52,9 @@ export const CREATE_FLOW_MD_UP_GRID_CELL_CLASS =
 export const CREATE_FLOW_TWO_COLUMN_MAX_WIDTH_CLASS =
   "w-full min-w-0 lg:max-w-[1328px]";
 
-/** Review / card-stack frames (Figma Flow — Review max 1440). */
+/**
+ * Review frames (Figma Flow — Review max 1440).
+ */
 export const CREATE_FLOW_WIDE_MAX_CLASS = "w-full min-w-0 lg:max-w-[1440px]";
 
 /**
@@ -62,14 +70,6 @@ export const CREATE_FLOW_MD_CENTERED_MAIN_CLASS =
  */
 export const CREATE_FLOW_MD_CENTERED_SHELL_CLASS = "md:my-auto md:pt-0";
 
-/**
- * Card-stack steps only (Figma compact card stack): wider than header lockup so the card grid /
- * pyramid fits (max 860px). Header lockup stays {@link CREATE_FLOW_MD_UP_COLUMN_MAX_CLASS}.
- * Card–card gap uses `gap-2` in `CardStack` (same on mobile and md+).
- */
-export const CREATE_FLOW_CARD_STACK_AREA_MAX_CLASS =
-  "w-full min-w-0 md:max-w-[min(100%,860px)]";
-
 /**
  * Inner max-width for step content and the action bar, so the primary button
  * lines up with the nearest content column above 1440.
@@ -88,11 +88,10 @@ export function getCreateFlowContentMaxClass(options: {
   switch (CREATE_FLOW_SCREEN_REGISTRY[options.step].layoutKind) {
     case "select":
     case "right-rail":
+    case "card":
     case "completed":
     case "review":
       return CREATE_FLOW_TWO_COLUMN_MAX_WIDTH_CLASS;
-    case "card":
-      return CREATE_FLOW_WIDE_MAX_CLASS;
     default:
       return CREATE_FLOW_MD_UP_COLUMN_MAX_CLASS;
   }