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>
2026-08-19 21:10:58 -06:00
parent 3c7fca83b2
commit d6d6a5e055
8 changed files with 54 additions and 9 deletions
@@ -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
-        ? "items-start justify-center overflow-y-auto"
+      : isTemplateReviewRoute || isFinalReviewLike || isCardLayoutStep
+        ? CREATE_FLOW_MD_CENTERED_MAIN_CLASS
        : "items-start justify-center overflow-y-auto md:items-center";

  const isTextStep = createFlowStepUsesCenteredTextLayout(currentStep);
@@ -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}`}
      >
@@ -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}.
@@ -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
@@ -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}>
@@ -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}>
@@ -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}>