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
@@ -6,7 +6,7 @@
 *
 * Lives under `screens/card/` (not `select/`): Figma **card stack** layout is a distinct shell from
 * two-column chip **select** frames. Future card-stack steps get their own `*Screen.tsx` here and
- * reuse `CardStack` / `CreateFlowStepShell` as needed.
+ * reuse `CardStack` / `CreateFlowCardStackStepShell` as needed.
 *
 * Card click opens the Figma create modal (node `20246-15829`) with three
 * editable sections rendered by {@link CommunicationMethodEditFields}. The
@@ -22,16 +22,10 @@ import { useCreateFlowMdUp } from "../../hooks/useCreateFlowMdUp";
 import { useBeforeUnloadGuard } from "../../../../hooks/useBeforeUnloadGuard";
 import { useDiscardCustomizeConfirm } from "../../hooks/useDiscardCustomizeConfirm";
 import { useMethodCardDeckOrdering } from "../../hooks/useMethodCardDeckOrdering";
-import { CreateFlowHeaderLockup } from "../../components/CreateFlowHeaderLockup";
+import { CreateFlowCardStackStepShell } from "../../components/CreateFlowCardStackStepShell";
 import CardStack from "../../../../components/cards/CardStack";
 import Create from "../../../../components/modals/Create";
 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";
 import CustomMethodCardWizard from "../../components/CustomMethodCardWizard";
 import { uploadCreateFlowFile } from "../../../../../lib/create/uploadToServer";
@@ -700,44 +694,30 @@ export function CommunicationMethodsScreen() {

  return (
    <>
-    <CreateFlowStepShell
-      variant="wideGridLoosePadding"
-      contentTopBelowMd="space-800"
-      className={CREATE_FLOW_MD_CENTERED_SHELL_CLASS}
+    <CreateFlowCardStackStepShell
+      lockupTitle={title}
+      lockupDescription={description}
+      stackBusy={!recommendationsReady}
    >
-      <div className="flex w-full min-w-0 flex-col items-center gap-6">
-        <div className={CREATE_FLOW_MD_UP_COLUMN_MAX_CLASS}>
-          <CreateFlowHeaderLockup
-            title={title}
-            description={description}
-            justification="center"
-          />
-        </div>
-        <div
-          className={CREATE_FLOW_CARD_STACK_AREA_MAX_CLASS}
-          aria-busy={!recommendationsReady}
-        >
-          {recommendationsReady && (
-            <CardStack
-              cards={sampleCards}
-              selectedIds={selectedIds}
-              onCardSelect={handleCardClick}
-              expanded={expanded}
-              onToggleExpand={() => {
-                markCreateFlowInteraction();
-                setExpanded((prev) => !prev);
-              }}
-              hasMore={true}
-              toggleLabel={comm.page.seeAllLink}
-              compactRecommendedLimit={5}
-              compactCardIds={compactCardIds}
-              compactDesktopLayout="flexWrap"
-              headerLockupSize={mdUp ? "L" : "M"}
-            />
-          )}
-        </div>
-      </div>
-
+      {recommendationsReady && (
+        <CardStack
+          cards={sampleCards}
+          selectedIds={selectedIds}
+          onCardSelect={handleCardClick}
+          expanded={expanded}
+          onToggleExpand={() => {
+            markCreateFlowInteraction();
+            setExpanded((prev) => !prev);
+          }}
+          hasMore={true}
+          toggleLabel={comm.page.seeAllLink}
+          compactRecommendedLimit={5}
+          compactCardIds={compactCardIds}
+          compactDesktopLayout="flexWrap"
+          headerLockupSize={mdUp ? "L" : "M"}
+        />
+      )}
+    </CreateFlowCardStackStepShell>
      <Create
        isOpen={createModalOpen}
        onClose={handleCreateModalClose}
@@ -780,7 +760,6 @@ export function CommunicationMethodsScreen() {
          )
        ) : null}
      </Create>
-    </CreateFlowStepShell>
      <CustomMethodCardWizard
        isOpen={addCustomWizardOpen}
        onClose={handleCloseAddWizard}
@@ -19,16 +19,10 @@ import { useCreateFlowMdUp } from "../../hooks/useCreateFlowMdUp";
 import { useBeforeUnloadGuard } from "../../../../hooks/useBeforeUnloadGuard";
 import { useDiscardCustomizeConfirm } from "../../hooks/useDiscardCustomizeConfirm";
 import { useMethodCardDeckOrdering } from "../../hooks/useMethodCardDeckOrdering";
-import { CreateFlowHeaderLockup } from "../../components/CreateFlowHeaderLockup";
+import { CreateFlowCardStackStepShell } from "../../components/CreateFlowCardStackStepShell";
 import CardStack from "../../../../components/cards/CardStack";
 import Create from "../../../../components/modals/Create";
 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";
 import CustomMethodCardWizard from "../../components/CustomMethodCardWizard";
 import { uploadCreateFlowFile } from "../../../../../lib/create/uploadToServer";
@@ -701,44 +695,30 @@ export function ConflictManagementScreen() {

  return (
    <>
-    <CreateFlowStepShell
-      variant="wideGridLoosePadding"
-      contentTopBelowMd="space-800"
-      className={CREATE_FLOW_MD_CENTERED_SHELL_CLASS}
+    <CreateFlowCardStackStepShell
+      lockupTitle={title}
+      lockupDescription={description}
+      stackBusy={!recommendationsReady}
    >
-      <div className="flex w-full min-w-0 flex-col items-center gap-6">
-        <div className={CREATE_FLOW_MD_UP_COLUMN_MAX_CLASS}>
-          <CreateFlowHeaderLockup
-            title={title}
-            description={description}
-            justification="center"
-          />
-        </div>
-        <div
-          className={CREATE_FLOW_CARD_STACK_AREA_MAX_CLASS}
-          aria-busy={!recommendationsReady}
-        >
-          {recommendationsReady && (
-            <CardStack
-              cards={sampleCards}
-              selectedIds={selectedIds}
-              onCardSelect={handleCardClick}
-              expanded={expanded}
-              onToggleExpand={() => {
-                markCreateFlowInteraction();
-                setExpanded((prev) => !prev);
-              }}
-              hasMore={true}
-              toggleLabel={cm.page.seeAllLink}
-              compactRecommendedLimit={5}
-              compactCardIds={compactCardIds}
-              compactDesktopLayout="pyramidFive"
-              headerLockupSize={mdUp ? "L" : "M"}
-            />
-          )}
-        </div>
-      </div>
-
+      {recommendationsReady && (
+        <CardStack
+          cards={sampleCards}
+          selectedIds={selectedIds}
+          onCardSelect={handleCardClick}
+          expanded={expanded}
+          onToggleExpand={() => {
+            markCreateFlowInteraction();
+            setExpanded((prev) => !prev);
+          }}
+          hasMore={true}
+          toggleLabel={cm.page.seeAllLink}
+          compactRecommendedLimit={5}
+          compactCardIds={compactCardIds}
+          compactDesktopLayout="pyramidFive"
+          headerLockupSize={mdUp ? "L" : "M"}
+        />
+      )}
+    </CreateFlowCardStackStepShell>
      <Create
        isOpen={createModalOpen}
        onClose={handleCreateModalClose}
@@ -781,7 +761,6 @@ export function ConflictManagementScreen() {
          )
        ) : null}
      </Create>
-    </CreateFlowStepShell>
      <CustomMethodCardWizard
        isOpen={addCustomWizardOpen}
        onClose={handleCloseAddWizard}
@@ -20,16 +20,10 @@ import { useCreateFlowMdUp } from "../../hooks/useCreateFlowMdUp";
 import { useBeforeUnloadGuard } from "../../../../hooks/useBeforeUnloadGuard";
 import { useDiscardCustomizeConfirm } from "../../hooks/useDiscardCustomizeConfirm";
 import { useMethodCardDeckOrdering } from "../../hooks/useMethodCardDeckOrdering";
-import { CreateFlowHeaderLockup } from "../../components/CreateFlowHeaderLockup";
+import { CreateFlowCardStackStepShell } from "../../components/CreateFlowCardStackStepShell";
 import CardStack from "../../../../components/cards/CardStack";
 import Create from "../../../../components/modals/Create";
 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";
 import CustomMethodCardWizard from "../../components/CustomMethodCardWizard";
 import { uploadCreateFlowFile } from "../../../../../lib/create/uploadToServer";
@@ -694,44 +688,30 @@ export function MembershipMethodsScreen() {

  return (
    <>
-    <CreateFlowStepShell
-      variant="wideGridLoosePadding"
-      contentTopBelowMd="space-800"
-      className={CREATE_FLOW_MD_CENTERED_SHELL_CLASS}
+    <CreateFlowCardStackStepShell
+      lockupTitle={title}
+      lockupDescription={description}
+      stackBusy={!recommendationsReady}
    >
-      <div className="flex w-full min-w-0 flex-col items-center gap-6">
-        <div className={CREATE_FLOW_MD_UP_COLUMN_MAX_CLASS}>
-          <CreateFlowHeaderLockup
-            title={title}
-            description={description}
-            justification="center"
-          />
-        </div>
-        <div
-          className={CREATE_FLOW_CARD_STACK_AREA_MAX_CLASS}
-          aria-busy={!recommendationsReady}
-        >
-          {recommendationsReady && (
-            <CardStack
-              cards={sampleCards}
-              selectedIds={selectedIds}
-              onCardSelect={handleCardClick}
-              expanded={expanded}
-              onToggleExpand={() => {
-                markCreateFlowInteraction();
-                setExpanded((prev) => !prev);
-              }}
-              hasMore={true}
-              toggleLabel={mem.page.seeAllLink}
-              compactRecommendedLimit={5}
-              compactCardIds={compactCardIds}
-              compactDesktopLayout="pyramidFive"
-              headerLockupSize={mdUp ? "L" : "M"}
-            />
-          )}
-        </div>
-      </div>
-
+      {recommendationsReady && (
+        <CardStack
+          cards={sampleCards}
+          selectedIds={selectedIds}
+          onCardSelect={handleCardClick}
+          expanded={expanded}
+          onToggleExpand={() => {
+            markCreateFlowInteraction();
+            setExpanded((prev) => !prev);
+          }}
+          hasMore={true}
+          toggleLabel={mem.page.seeAllLink}
+          compactRecommendedLimit={5}
+          compactCardIds={compactCardIds}
+          compactDesktopLayout="pyramidFive"
+          headerLockupSize={mdUp ? "L" : "M"}
+        />
+      )}
+    </CreateFlowCardStackStepShell>
      <Create
        isOpen={createModalOpen}
        onClose={handleCreateModalClose}
@@ -774,7 +754,6 @@ export function MembershipMethodsScreen() {
          )
        ) : null}
      </Create>
-    </CreateFlowStepShell>
      <CustomMethodCardWizard
        isOpen={addCustomWizardOpen}
        onClose={handleCloseAddWizard}
@@ -16,6 +16,8 @@ import { useCreateFlowMdUp } from "../../hooks/useCreateFlowMdUp";
 import { CreateFlowHeaderLockup } from "../../components/CreateFlowHeaderLockup";
 import {
  CREATE_FLOW_MD_UP_GRID_CELL_CLASS,
+  CREATE_FLOW_PAGE_GUTTER_CLASS,
+  CREATE_FLOW_SCROLL_REGION_CLASS,
  CREATE_FLOW_TWO_COLUMN_MAX_WIDTH_CLASS,
 } from "../../components/createFlowLayoutTokens";
 import {
@@ -163,7 +165,7 @@ export function CompletedScreen() {
    <>
      <div className="flex min-h-0 w-full flex-1 flex-col overflow-hidden bg-[var(--color-teal-teal50,#c9fef9)] md:h-full">
        <div
-          className={`mx-auto grid min-h-0 w-full grid-cols-1 gap-4 px-5 max-md:max-w-[639px] max-md:overflow-y-auto max-md:overscroll-y-contain max-md:pt-[var(--space-800)] max-md:pb-8 md:h-full md:grid-cols-2 md:grid-rows-1 md:items-stretch md:justify-items-center md:gap-[var(--measures-spacing-1200,48px)] md:overflow-hidden md:px-12 md:py-0 ${CREATE_FLOW_TWO_COLUMN_MAX_WIDTH_CLASS}`}
+          className={`mx-auto grid min-h-0 w-full grid-cols-1 gap-4 ${CREATE_FLOW_PAGE_GUTTER_CLASS} max-md:overflow-y-auto max-md:overscroll-y-contain max-md:pt-[var(--space-800)] max-md:pb-8 md:h-full md:grid-cols-2 md:grid-rows-1 md:items-stretch md:justify-items-center md:gap-[var(--measures-spacing-1200,48px)] md:overflow-hidden md:py-0 ${CREATE_FLOW_TWO_COLUMN_MAX_WIDTH_CLASS}`}
        >
          <div
            className={`flex flex-col justify-start max-md:min-h-min max-md:overflow-visible min-h-0 overflow-hidden md:justify-center md:pb-8 ${CREATE_FLOW_MD_UP_GRID_CELL_CLASS}`}
@@ -177,7 +179,7 @@ export function CompletedScreen() {
            />
          </div>
          <div
-            className={`scrollbar-hide relative flex min-h-0 flex-col self-stretch overflow-x-hidden md:max-h-full md:overflow-y-auto ${CREATE_FLOW_MD_UP_GRID_CELL_CLASS}`}
+            className={`relative flex min-h-0 flex-col self-stretch overflow-x-hidden md:max-h-full md:overflow-y-auto ${CREATE_FLOW_SCROLL_REGION_CLASS} ${CREATE_FLOW_MD_UP_GRID_CELL_CLASS}`}
          >
            <div
              className="pointer-events-none sticky top-0 z-10 hidden h-5 shrink-0 bg-gradient-to-b from-[var(--color-teal-teal50,#c9fef9)]/55 from-0% via-[var(--color-teal-teal50,#c9fef9)]/20 via-50% to-transparent md:block"
@@ -9,8 +9,7 @@ import { useTranslation } from "../../../../contexts/MessagesContext";
 import { MAX_STAKEHOLDER_EMAILS } from "../../../../../lib/create/stakeholderLimits";
 import { useCreateFlow } from "../../context/CreateFlowContext";
 import { CreateFlowHeaderLockup } from "../../components/CreateFlowHeaderLockup";
-import { CreateFlowStepShell } from "../../components/CreateFlowStepShell";
-import { CREATE_FLOW_MD_UP_COLUMN_MAX_CLASS } from "../../components/createFlowLayoutTokens";
+import { CreateFlowTwoColumnSelectShell } from "../../components/CreateFlowTwoColumnSelectShell";
 import {
  CREATE_FLOW_MANAGE_STAKEHOLDERS_QUERY,
  CREATE_FLOW_MANAGE_STAKEHOLDERS_VALUE,
@@ -131,64 +130,52 @@ export function ConfirmStakeholdersScreen() {

  if (managePublishedMode) {
    return (
-      <CreateFlowStepShell
-        variant="centeredNarrowBottomPad"
-        contentTopBelowMd="space-1400"
+      <CreateFlowTwoColumnSelectShell
+        header={
+          <CreateFlowHeaderLockup
+            title={t("managePublished.lockupTitle")}
+            description={t("managePublished.lockupDescription")}
+            justification="left"
+          />
+        }
      >
-        <div
-          className={`flex flex-col items-start gap-[var(--measures-spacing-300,12px)] ${CREATE_FLOW_MD_UP_COLUMN_MAX_CLASS}`}
-        >
-          <div className="flex w-full flex-col gap-[var(--measures-spacing-200,8px)] py-[12px]">
-            <CreateFlowHeaderLockup
-              title={t("managePublished.lockupTitle")}
-              description={t("managePublished.lockupDescription")}
-              justification="left"
-            />
-          </div>
-          <PublishedStakeholdersManagePanel ruleId={editingPublishedRuleId} />
-        </div>
-      </CreateFlowStepShell>
+        <PublishedStakeholdersManagePanel ruleId={editingPublishedRuleId} />
+      </CreateFlowTwoColumnSelectShell>
    );
  }

  return (
    <>
-      <CreateFlowStepShell
-        variant="centeredNarrowBottomPad"
-        contentTopBelowMd="space-1400"
-      >
-        <div
-          className={`flex flex-col items-start gap-[var(--measures-spacing-300,12px)] ${CREATE_FLOW_MD_UP_COLUMN_MAX_CLASS}`}
-        >
-          <div className="flex w-full flex-col gap-[var(--measures-spacing-200,8px)] py-[12px]">
-            <CreateFlowHeaderLockup
-              title={t("title")}
-              description={t("description")}
-              justification="left"
-            />
-          </div>
-          {chipError ? (
-            <p
-              className="text-small-paragraph text-[var(--color-border-default-utility-negative)]"
-              role="alert"
-            >
-              {chipError}
-            </p>
-          ) : null}
-          <MultiSelect
-            formHeader={false}
-            showHelpIcon={false}
-            size="s"
-            options={stakeholderOptions}
-            onChipClick={handleChipClick}
-            onAddClick={handleAddStakeholder}
-            onCustomChipConfirm={handleCustomChipConfirm}
-            onCustomChipClose={handleCustomChipClose}
-            addButton
-            addButtonText={t("addStakeholder")}
+      <CreateFlowTwoColumnSelectShell
+        header={
+          <CreateFlowHeaderLockup
+            title={t("title")}
+            description={t("description")}
+            justification="left"
          />
-        </div>
-      </CreateFlowStepShell>
+        }
+      >
+        {chipError ? (
+          <p
+            className="text-small-paragraph text-[var(--color-border-default-utility-negative)]"
+            role="alert"
+          >
+            {chipError}
+          </p>
+        ) : null}
+        <MultiSelect
+          formHeader={false}
+          showHelpIcon={false}
+          size="s"
+          options={stakeholderOptions}
+          onChipClick={handleChipClick}
+          onAddClick={handleAddStakeholder}
+          onCustomChipConfirm={handleCustomChipConfirm}
+          onCustomChipClose={handleCustomChipClose}
+          addButton
+          addButtonText={t("addStakeholder")}
+        />
+      </CreateFlowTwoColumnSelectShell>

      {!toastDismissed && (
        <div