Center lockup-plus-card and card-stack create-flow steps in the nav–footer band so they are not stuck under the header when the content is shorter than the viewport.

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

app/(app)/create/CreateFlowLayoutClient.tsx

@@ -70,6 +70,7 @@ import {
   CREATE_FLOW_FOOTER_BUTTON_CLASS,
   CREATE_FLOW_FOOTER_BUTTON_ON_DARK_CLASS,
 } from "./utils/createFlowFooterClassNames";
+import { CREATE_FLOW_MD_CENTERED_MAIN_CLASS } from "./components/createFlowLayoutTokens";
 import {
   CUSTOM_RULE_CONFIRM_FOOTER_STEP_BY_STEP,
   methodCardFacetSectionForConfirmStep,
@@ -467,13 +468,13 @@ function CreateFlowLayoutContent({
   );
   const stepIdx = currentStep != null ? getStepIndex(currentStep) : -1;
 
-  /** At `md+`, main cross-axis: center by default; exceptions stay top-aligned (see product spec). */
+  /** Lockup+card / card-stack: `items-start` + shell `my-auto` so overflow scrolls from the top. */
   const mainContentClass = isCompletedStep
     ? "items-stretch overflow-y-auto md:overflow-hidden"
     : isSelectSplitScrollStep
       ? "items-start justify-start overflow-y-auto max-lg:overflow-y-auto lg:min-h-0 lg:items-stretch lg:overflow-hidden"
-      : isFinalReviewLike || isCardLayoutStep || isTemplateReviewRoute
+      : isTemplateReviewRoute || isFinalReviewLike || isCardLayoutStep
-        ? "items-start justify-center overflow-y-auto"
+        ? CREATE_FLOW_MD_CENTERED_MAIN_CLASS
         : "items-start justify-center overflow-y-auto md:items-center";
 
   const isTextStep = createFlowStepUsesCenteredTextLayout(currentStep);

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

@@ -4,6 +4,7 @@ import type { ReactNode } from "react";
 import { CreateFlowHeaderLockup } from "./CreateFlowHeaderLockup";
 import { CreateFlowStepShell } from "./CreateFlowStepShell";
 import {
+  CREATE_FLOW_MD_CENTERED_SHELL_CLASS,
   CREATE_FLOW_MD_UP_GRID_CELL_CLASS,
   CREATE_FLOW_TWO_COLUMN_MAX_WIDTH_CLASS,
 } from "./createFlowLayoutTokens";
@@ -18,14 +19,18 @@ type CreateFlowLockupCardStepShellProps = {
   children: ReactNode;
 };
 
-/** Final-review layout: `wideGrid`, two columns from `md:`, column widths from `createFlowLayoutTokens`. */
+/** Lockup + card: `wideGrid`, two columns from `md:`, centered in the nav–footer band from `md`. */
 export function CreateFlowLockupCardStepShell({
   lockupTitle,
   lockupDescription,
   children,
 }: CreateFlowLockupCardStepShellProps) {
   return (
-    <CreateFlowStepShell variant="wideGrid" contentTopBelowMd="space-800">
+    <CreateFlowStepShell
+      variant="wideGrid"
+      contentTopBelowMd="space-800"
+      className={CREATE_FLOW_MD_CENTERED_SHELL_CLASS}
+    >
       <div
         className={`mx-auto flex w-full min-w-0 flex-col gap-4 md:grid md:w-full md:grid-cols-2 md:justify-items-center md:gap-[var(--measures-spacing-1200,48px)] ${CREATE_FLOW_TWO_COLUMN_MAX_WIDTH_CLASS}`}
       >

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

@@ -9,6 +9,19 @@ export const CREATE_FLOW_MD_UP_GRID_CELL_CLASS =
 /** Two 640px columns + `--measures-spacing-1200` (48px) gutter. */
 export const CREATE_FLOW_TWO_COLUMN_MAX_WIDTH_CLASS = "md:max-w-[1328px]";
 
+/**
+ * Lockup+card and card-stack `<main>`: keep `items-start` so a tall card can
+ * scroll from the top. Pair with {@link CREATE_FLOW_MD_CENTERED_SHELL_CLASS}.
+ */
+export const CREATE_FLOW_MD_CENTERED_MAIN_CLASS =
+  "items-start justify-center overflow-y-auto";
+
+/**
+ * Center the step in the nav–footer band from `md` when it fits (`my-auto`),
+ * and drop the mobile top inset so that centering is not biased downward.
+ */
+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}.

app/(app)/create/review-template/[slug]/page.tsx

@@ -15,14 +15,17 @@ import {
   CreateFlowLockupCardStepShell,
 } from "../../components/CreateFlowLockupCardStepShell";
 import { CreateFlowStepShell } from "../../components/CreateFlowStepShell";
-import { CREATE_FLOW_MD_UP_COLUMN_MAX_CLASS } from "../../components/createFlowLayoutTokens";
+import {
+  CREATE_FLOW_MD_UP_COLUMN_MAX_CLASS,
+  CREATE_FLOW_MD_CENTERED_SHELL_CLASS,
+} from "../../components/createFlowLayoutTokens";
 import { useCreateFlowMdUp } from "../../hooks/useCreateFlowMdUp";
 
 interface PageProps {
   params: Promise<{ slug: string }>;
 }
 
-/** Template review route — same shell/grid as final-review; Figma `22142-898702`. */
+/** Template review — lockup + card, vertically centered (Figma `22142-898702`). */
 export default function ReviewTemplatePage({ params }: PageProps) {
   const { slug: rawSlug } = use(params);
   const slug = decodeURIComponent(rawSlug);
@@ -72,7 +75,11 @@ export default function ReviewTemplatePage({ params }: PageProps) {
 
   if (loading) {
     return (
-      <CreateFlowStepShell variant="wideGrid" contentTopBelowMd="space-800">
+      <CreateFlowStepShell
+        variant="wideGrid"
+        contentTopBelowMd="space-800"
+        className={CREATE_FLOW_MD_CENTERED_SHELL_CLASS}
+      >
         <div
           className={`flex shrink-0 items-center justify-start pb-16 ${CREATE_FLOW_MD_UP_COLUMN_MAX_CLASS}`}
         >
@@ -101,7 +108,11 @@ export default function ReviewTemplatePage({ params }: PageProps) {
             />
           </div>
         </div>
-        <CreateFlowStepShell variant="wideGrid" contentTopBelowMd="space-800">
+        <CreateFlowStepShell
+          variant="wideGrid"
+          contentTopBelowMd="space-800"
+          className={CREATE_FLOW_MD_CENTERED_SHELL_CLASS}
+        >
           <div
             className={`min-h-[40vh] shrink-0 ${CREATE_FLOW_MD_UP_COLUMN_MAX_CLASS}`}
             aria-hidden

app/(app)/create/screens/card/CommunicationMethodsScreen.tsx

@@ -28,6 +28,7 @@ import InlineTextButton from "../../../../components/buttons/InlineTextButton";
 import { CreateFlowStepShell } from "../../components/CreateFlowStepShell";
 import {
   CREATE_FLOW_CARD_STACK_AREA_MAX_CLASS,
+  CREATE_FLOW_MD_CENTERED_SHELL_CLASS,
   CREATE_FLOW_MD_UP_COLUMN_MAX_CLASS,
 } from "../../components/createFlowLayoutTokens";
 import { CommunicationMethodEditFields } from "../../components/methodEditFields";
@@ -727,6 +728,7 @@ export function CommunicationMethodsScreen() {
     <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">
         <div className={CREATE_FLOW_MD_UP_COLUMN_MAX_CLASS}>

app/(app)/create/screens/card/ConflictManagementScreen.tsx

@@ -25,6 +25,7 @@ import InlineTextButton from "../../../../components/buttons/InlineTextButton";
 import { CreateFlowStepShell } from "../../components/CreateFlowStepShell";
 import {
   CREATE_FLOW_CARD_STACK_AREA_MAX_CLASS,
+  CREATE_FLOW_MD_CENTERED_SHELL_CLASS,
   CREATE_FLOW_MD_UP_COLUMN_MAX_CLASS,
 } from "../../components/createFlowLayoutTokens";
 import { ConflictManagementEditFields } from "../../components/methodEditFields";
@@ -726,6 +727,7 @@ export function ConflictManagementScreen() {
     <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">
         <div className={CREATE_FLOW_MD_UP_COLUMN_MAX_CLASS}>

app/(app)/create/screens/card/MembershipMethodsScreen.tsx

@@ -26,6 +26,7 @@ import InlineTextButton from "../../../../components/buttons/InlineTextButton";
 import { CreateFlowStepShell } from "../../components/CreateFlowStepShell";
 import {
   CREATE_FLOW_CARD_STACK_AREA_MAX_CLASS,
+  CREATE_FLOW_MD_CENTERED_SHELL_CLASS,
   CREATE_FLOW_MD_UP_COLUMN_MAX_CLASS,
 } from "../../components/createFlowLayoutTokens";
 import { MembershipMethodEditFields } from "../../components/methodEditFields";
@@ -719,6 +720,7 @@ export function MembershipMethodsScreen() {
     <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">
         <div className={CREATE_FLOW_MD_UP_COLUMN_MAX_CLASS}>

tests/unit/createFlowLayoutTokens.test.ts

@@ -3,6 +3,8 @@ import {
   CREATE_FLOW_MD_UP_COLUMN_MAX_CLASS,
   CREATE_FLOW_MD_UP_GRID_CELL_CLASS,
   CREATE_FLOW_TWO_COLUMN_MAX_WIDTH_CLASS,
+  CREATE_FLOW_MD_CENTERED_MAIN_CLASS,
+  CREATE_FLOW_MD_CENTERED_SHELL_CLASS,
 } from "../../app/(app)/create/components/createFlowLayoutTokens";
 
 describe("createFlowLayoutTokens", () => {
@@ -15,4 +17,11 @@ describe("createFlowLayoutTokens", () => {
     );
     expect(CREATE_FLOW_TWO_COLUMN_MAX_WIDTH_CLASS).toBe("md:max-w-[1328px]");
   });
+
+  it("centers lockup+card and card-stack steps in the nav–footer band from md", () => {
+    expect(CREATE_FLOW_MD_CENTERED_MAIN_CLASS).toBe(
+      "items-start justify-center overflow-y-auto",
+    );
+    expect(CREATE_FLOW_MD_CENTERED_SHELL_CLASS).toBe("md:my-auto md:pt-0");
+  });
 });