From d6d6a5e055993a6d3b3db3122c23e336a152ed32 Mon Sep 17 00:00:00 2001 From: adilallo <39313955+adilallo@users.noreply.github.com> Date: Wed, 19 Aug 2026 21:10:58 -0600 Subject: [PATCH] =?UTF-8?q?Center=20lockup-plus-card=20and=20card-stack=20?= =?UTF-8?q?create-flow=20steps=20in=20the=20nav=E2=80=93footer=20band=20so?= =?UTF-8?q?=20they=20are=20not=20stuck=20under=20the=20header=20when=20the?= =?UTF-8?q?=20content=20is=20shorter=20than=20the=20viewport.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Cursor --- app/(app)/create/CreateFlowLayoutClient.tsx | 7 ++++--- .../CreateFlowLockupCardStepShell.tsx | 9 +++++++-- .../components/createFlowLayoutTokens.ts | 13 +++++++++++++ .../create/review-template/[slug]/page.tsx | 19 +++++++++++++++---- .../card/CommunicationMethodsScreen.tsx | 2 ++ .../screens/card/ConflictManagementScreen.tsx | 2 ++ .../screens/card/MembershipMethodsScreen.tsx | 2 ++ tests/unit/createFlowLayoutTokens.test.ts | 9 +++++++++ 8 files changed, 54 insertions(+), 9 deletions(-) diff --git a/app/(app)/create/CreateFlowLayoutClient.tsx b/app/(app)/create/CreateFlowLayoutClient.tsx index 2af41dd..ee901b4 100644 --- a/app/(app)/create/CreateFlowLayoutClient.tsx +++ b/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 - ? "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); diff --git a/app/(app)/create/components/CreateFlowLockupCardStepShell.tsx b/app/(app)/create/components/CreateFlowLockupCardStepShell.tsx index 14c05d1..b9cfc7a 100644 --- a/app/(app)/create/components/CreateFlowLockupCardStepShell.tsx +++ b/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 ( - +
diff --git a/app/(app)/create/components/createFlowLayoutTokens.ts b/app/(app)/create/components/createFlowLayoutTokens.ts index 30f147a..ef372a7 100644 --- a/app/(app)/create/components/createFlowLayoutTokens.ts +++ b/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 `
`: 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}. diff --git a/app/(app)/create/review-template/[slug]/page.tsx b/app/(app)/create/review-template/[slug]/page.tsx index f2a579c..ac19992 100644 --- a/app/(app)/create/review-template/[slug]/page.tsx +++ b/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 ( - +
@@ -101,7 +108,11 @@ export default function ReviewTemplatePage({ params }: PageProps) { />
- +
diff --git a/app/(app)/create/screens/card/ConflictManagementScreen.tsx b/app/(app)/create/screens/card/ConflictManagementScreen.tsx index e352cd1..993e6ff 100644 --- a/app/(app)/create/screens/card/ConflictManagementScreen.tsx +++ b/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() {
diff --git a/app/(app)/create/screens/card/MembershipMethodsScreen.tsx b/app/(app)/create/screens/card/MembershipMethodsScreen.tsx index 4c603af..71b11e4 100644 --- a/app/(app)/create/screens/card/MembershipMethodsScreen.tsx +++ b/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() {
diff --git a/tests/unit/createFlowLayoutTokens.test.ts b/tests/unit/createFlowLayoutTokens.test.ts index fda3e2f..4a93587 100644 --- a/tests/unit/createFlowLayoutTokens.test.ts +++ b/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"); + }); });