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>

tests/components/CreateFlowFooter.test.tsx

@@ -86,4 +86,17 @@ describe("CreateFlowFooter (behavioral tests)", () => {
     expect(buttons).toHaveLength(1);
     expect(buttons[0]).toHaveTextContent("Back");
   });
+
+  it("constrains the action row to the step content max-width", () => {
+    const { container } = render(
+      <CreateFlowFooter contentMaxClass="w-full min-w-0 lg:max-w-[640px]" />,
+    );
+    const footer = screen.getByRole("contentinfo", {
+      name: "Create Flow Footer",
+    });
+    expect(footer.className).toContain("pb-[env(safe-area-inset-bottom,0px)]");
+    expect(
+      container.querySelector('[class*="lg:max-w-[640px]"]'),
+    ).not.toBeNull();
+  });
 });

tests/unit/createFlowLayoutTokens.test.ts

@@ -3,19 +3,35 @@ import {
   CREATE_FLOW_MD_UP_COLUMN_MAX_CLASS,
   CREATE_FLOW_MD_UP_GRID_CELL_CLASS,
   CREATE_FLOW_TWO_COLUMN_MAX_WIDTH_CLASS,
+  CREATE_FLOW_WIDE_MAX_CLASS,
   CREATE_FLOW_MD_CENTERED_MAIN_CLASS,
   CREATE_FLOW_MD_CENTERED_SHELL_CLASS,
+  CREATE_FLOW_PAGE_GUTTER_CLASS,
+  CREATE_FLOW_VIEWPORT_FRAME_CLASS,
+  getCreateFlowContentMaxClass,
 } from "../../app/(app)/create/components/createFlowLayoutTokens";
 
 describe("createFlowLayoutTokens", () => {
   it("exports create-flow column and two-column max class strings", () => {
     expect(CREATE_FLOW_MD_UP_COLUMN_MAX_CLASS).toBe(
-      "w-full min-w-0 md:max-w-[640px]",
+      "w-full min-w-0 lg:max-w-[640px]",
     );
     expect(CREATE_FLOW_MD_UP_GRID_CELL_CLASS).toBe(
-      "w-full min-w-0 md:mx-auto md:max-w-[640px]",
+      "w-full min-w-0 lg:mx-auto lg:max-w-[640px]",
     );
-    expect(CREATE_FLOW_TWO_COLUMN_MAX_WIDTH_CLASS).toBe("md:max-w-[1328px]");
+    expect(CREATE_FLOW_TWO_COLUMN_MAX_WIDTH_CLASS).toBe(
+      "w-full min-w-0 lg:max-w-[1328px]",
+    );
+    expect(CREATE_FLOW_WIDE_MAX_CLASS).toBe("w-full min-w-0 lg:max-w-[1440px]");
+  });
+
+  it("uses one gutter scale across the six viewport bands", () => {
+    expect(CREATE_FLOW_PAGE_GUTTER_CLASS).toBe("px-5 md:px-12 lg:px-16");
+  });
+
+  it("sizes the wizard frame with dynamic viewport height", () => {
+    expect(CREATE_FLOW_VIEWPORT_FRAME_CLASS).toContain("h-dvh");
+    expect(CREATE_FLOW_VIEWPORT_FRAME_CLASS).toContain("max-h-dvh");
   });
 
   it("centers lockup+card and card-stack steps in the nav–footer band from md", () => {
@@ -24,4 +40,25 @@ describe("createFlowLayoutTokens", () => {
     );
     expect(CREATE_FLOW_MD_CENTERED_SHELL_CLASS).toBe("md:my-auto md:pt-0");
   });
+
+  it("aligns the action bar max-width with the step content column", () => {
+    expect(
+      getCreateFlowContentMaxClass({ step: "community-name" }),
+    ).toBe(CREATE_FLOW_MD_UP_COLUMN_MAX_CLASS);
+    expect(
+      getCreateFlowContentMaxClass({ step: "community-structure" }),
+    ).toBe(CREATE_FLOW_TWO_COLUMN_MAX_WIDTH_CLASS);
+    expect(
+      getCreateFlowContentMaxClass({ step: "communication-methods" }),
+    ).toBe(CREATE_FLOW_WIDE_MAX_CLASS);
+    expect(
+      getCreateFlowContentMaxClass({ step: "final-review" }),
+    ).toBe(CREATE_FLOW_TWO_COLUMN_MAX_WIDTH_CLASS);
+    expect(
+      getCreateFlowContentMaxClass({
+        step: "informational",
+        isTemplateReview: true,
+      }),
+    ).toBe(CREATE_FLOW_TWO_COLUMN_MAX_WIDTH_CLASS);
+  });
 });

tests/unit/flowSteps.test.ts

@@ -10,6 +10,7 @@ import {
   resolveCreateFlowBackTarget,
   shouldOfferCreateFlowSaveAndExit,
   isDirectTemplateReviewEntry,
+  createFlowStepUsesSelectSplitScroll,
   TEMPLATES_FACET_RECOMMEND_QUERY,
   TEMPLATES_FACET_RECOMMEND_VALUE,
   TEMPLATE_REVIEW_FROM_CREATE_FLOW_QUERY,
@@ -221,4 +222,14 @@ describe("flowSteps", () => {
     ).toBe(false);
     expect(isDirectTemplateReviewEntry(null)).toBe(false);
   });
+
+  it("uses split-column scroll for select, right-rail, and stakeholders", () => {
+    expect(createFlowStepUsesSelectSplitScroll("community-structure")).toBe(
+      true,
+    );
+    expect(createFlowStepUsesSelectSplitScroll("confirm-stakeholders")).toBe(
+      true,
+    );
+    expect(createFlowStepUsesSelectSplitScroll("community-name")).toBe(false);
+  });
 });