Unify create-flow gutters, viewport height, and action-bar width so tablet and wide layouts stay aligned with step content.

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-09-10 12:02:06 -06:00
parent 4055278628
commit 0e272f0c1e
20 changed files with 387 additions and 253 deletions
@@ -0,0 +1,56 @@
+"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>
+  );
+}
@@ -1,6 +1,7 @@
 "use client";

 import type { ReactNode } from "react";
+import { CREATE_FLOW_PAGE_GUTTER_CLASS } from "./createFlowLayoutTokens";

 export type CreateFlowStepShellVariant =
  | "centeredNarrow"
@@ -13,15 +14,12 @@ export type CreateFlowStepShellVariant =
 export type CreateFlowContentTopBelowMd = "none" | "space-1400" | "space-800";

 const outerByVariant: Record<CreateFlowStepShellVariant, string> = {
-  centeredNarrow:
-    "flex w-full min-w-0 flex-col items-center px-5 md:px-16",
-  centeredNarrowBottomPad:
-    "flex w-full min-w-0 flex-col items-center px-5 pb-28 md:px-[var(--measures-spacing-1800,64px)] md:pb-32",
-  /** Wide two-column steps; 1328px = two 640px columns + 48px gutter. */
-  wideGrid: "w-full min-w-0 max-w-[1328px] shrink-0 px-5 md:px-12",
-  /** Create Community review + card grid (Figma Flow — Review `19706:12135`): max width 1440. */
-  wideGridLoosePadding:
-    "w-full min-w-0 max-w-[1440px] shrink-0 px-5 md:px-16",
+  centeredNarrow: `flex w-full min-w-0 flex-col items-center ${CREATE_FLOW_PAGE_GUTTER_CLASS}`,
+  centeredNarrowBottomPad: `flex w-full min-w-0 flex-col items-center ${CREATE_FLOW_PAGE_GUTTER_CLASS} pb-28 md:pb-32`,
+  /** Wide two-column steps; inner content supplies the 1328px cap. */
+  wideGrid: `flex w-full min-w-0 shrink-0 flex-col items-center ${CREATE_FLOW_PAGE_GUTTER_CLASS}`,
+  /** Create Community review + card grid; inner content supplies the 1440px cap. */
+  wideGridLoosePadding: `flex w-full min-w-0 shrink-0 flex-col items-center ${CREATE_FLOW_PAGE_GUTTER_CLASS}`,
  bare: "w-full min-w-0",
 };

@@ -41,7 +39,8 @@ interface CreateFlowStepShellProps {

 /**
 * Shared horizontal padding and width constraints for create-flow step pages.
- * Horizontal padding uses Tailwind `md:` so it tracks `--breakpoint-md` (640px in `app/tailwind.css`).
+ * Gutters come from {@link CREATE_FLOW_PAGE_GUTTER_CLASS} (`md` / `lg` track
+ * `--breakpoint-md` and `--breakpoint-lg` in `app/tailwind.css`).
 */
 export function CreateFlowStepShell({
  children,
@@ -5,7 +5,11 @@ import {
  CreateFlowStepShell,
  type CreateFlowContentTopBelowMd,
 } from "./CreateFlowStepShell";
-import { CREATE_FLOW_MD_UP_COLUMN_MAX_CLASS } from "./createFlowLayoutTokens";
+import {
+  CREATE_FLOW_MD_UP_COLUMN_MAX_CLASS,
+  CREATE_FLOW_SCROLL_REGION_CLASS,
+  CREATE_FLOW_TWO_COLUMN_MAX_WIDTH_CLASS,
+} from "./createFlowLayoutTokens";

 export type CreateFlowSelectShellLgVerticalAlign = "center" | "start";

@@ -26,10 +30,10 @@ interface CreateFlowTwoColumnSelectShellProps {
 }

 /**
- * Two-column layout for create-flow select steps (community size/structure, core values) and
- * {@link DecisionApproachesScreen} (decision approaches). Below `lg` (1024px), one column + main scrolls.
- * At `lg+`, mirrors {@link CompletedScreen}: static header column + scrollable controls column
- * (`min-h-0` + `overflow-y-auto` height chain; see completed page right rail).
+ * Question-and-options layout for create-flow select steps (community size/structure,
+ * core values, stakeholders) 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).
 */
 export function CreateFlowTwoColumnSelectShell({
  header,
@@ -56,24 +60,24 @@ export function CreateFlowTwoColumnSelectShell({
    >
      <div
        className={
-          "flex w-full min-w-0 flex-col items-start gap-[var(--measures-spacing-400,16px)] md:max-w-[640px] " +
-          "max-lg:flex-none lg:max-h-full lg:max-w-[1328px] lg:min-h-0 lg:flex-1 lg:flex-row lg:flex-nowrap " +
-          `${rowLgCrossAlignClass} lg:justify-center lg:gap-[var(--measures-spacing-1200,48px)] lg:overflow-hidden`
+          "flex w-full min-w-0 flex-col items-start gap-[var(--measures-spacing-400,16px)] " +
+          "max-lg:flex-none lg:max-h-full lg:min-h-0 lg:flex-1 lg:flex-row lg:flex-nowrap " +
+          `${rowLgCrossAlignClass} lg:justify-center lg:gap-[var(--measures-spacing-1200,48px)] lg:overflow-hidden ${CREATE_FLOW_TWO_COLUMN_MAX_WIDTH_CLASS}`
        }
      >
        <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] lg:max-w-[640px] ${CREATE_FLOW_MD_UP_COLUMN_MAX_CLASS}`
+            `lg:flex-1 ${leftLgMainJustifyClass} lg:py-[12px] ${CREATE_FLOW_MD_UP_COLUMN_MAX_CLASS}`
          }
        >
          {header}
        </div>
        <div
          className={
-            `scrollbar-hide relative flex w-full min-w-0 flex-col items-start gap-[var(--measures-spacing-800,32px)] ` +
+            `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)] ` +
-            CREATE_FLOW_MD_UP_COLUMN_MAX_CLASS
+            `${CREATE_FLOW_SCROLL_REGION_CLASS} ${CREATE_FLOW_MD_UP_COLUMN_MAX_CLASS}`
          }
        >
          {children}
@@ -1,13 +1,47 @@
-/** Single column/section: full width under `md`, max 640px from `--breakpoint-md` up. */
+import type { CreateFlowStep } from "../types";
+import { CREATE_FLOW_SCREEN_REGISTRY } from "../utils/createFlowScreenRegistry";
+
+/**
+ * Shared page gutters for create-flow chrome and step shells.
+ * Six viewport bands collapse to three values: 20px below `md`, 48px from `md`,
+ * 64px from `lg` (320–639 / 640–1023 / 1024+).
+ */
+export const CREATE_FLOW_PAGE_GUTTER_CLASS = "px-5 md:px-12 lg:px-16";
+
+/**
+ * Wizard viewport frame. `dvh` tracks mobile browser chrome so the action bar
+ * stays on-screen; `max-h-dvh` keeps the flex column from overflowing it.
+ */
+export const CREATE_FLOW_VIEWPORT_FRAME_CLASS =
+  "relative flex h-dvh max-h-dvh min-h-0 flex-col overflow-hidden";
+
+/** Design-system scrollbar for create-flow scroll regions (not `scrollbar-hide`). */
+export const CREATE_FLOW_SCROLL_REGION_CLASS = "scrollbar-design";
+
+/**
+ * Fade above the fixed action bar so content that continues below the fold is
+ * visible as a continuation cue (Figma Scrim / footer overlay).
+ */
+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";
+
+/**
+ * Single column: full width below `lg` so tablet widths use available space;
+ * 640px from `--breakpoint-lg` up (two-column layouts start at `lg`).
+ */
 export const CREATE_FLOW_MD_UP_COLUMN_MAX_CLASS =
-  "w-full min-w-0 md:max-w-[640px]";
+  "w-full min-w-0 lg:max-w-[640px]";

 /** Grid cell: same cap as column max, centered when the track is wider than 640px. */
 export const CREATE_FLOW_MD_UP_GRID_CELL_CLASS =
-  "w-full min-w-0 md:mx-auto md:max-w-[640px]";
+  "w-full min-w-0 lg:mx-auto lg:max-w-[640px]";

 /** Two 640px columns + `--measures-spacing-1200` (48px) gutter. */
-export const CREATE_FLOW_TWO_COLUMN_MAX_WIDTH_CLASS = "md:max-w-[1328px]";
+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). */
+export const CREATE_FLOW_WIDE_MAX_CLASS = "w-full min-w-0 lg:max-w-[1440px]";

 /**
 * Lockup+card and card-stack `<main>`: keep `items-start` so a tall card can
@@ -29,3 +63,30 @@ export const CREATE_FLOW_MD_CENTERED_SHELL_CLASS = "md:my-auto md:pt-0";
 */
 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.
+ */
+export function getCreateFlowContentMaxClass(options: {
+  step: CreateFlowStep | null | undefined;
+  isTemplateReview?: boolean;
+}): string {
+  if (options.isTemplateReview) {
+    return CREATE_FLOW_TWO_COLUMN_MAX_WIDTH_CLASS;
+  }
+  if (!options.step) {
+    return CREATE_FLOW_MD_UP_COLUMN_MAX_CLASS;
+  }
+  switch (CREATE_FLOW_SCREEN_REGISTRY[options.step].layoutKind) {
+    case "select":
+    case "right-rail":
+    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;
+  }
+}