Nine builder steps were using four layouts and four selection idioms. This puts question-and-options steps on one two-column shell and one Selection component with size variants, so method cards, chips, and the right rail share the same layout. Follow-up layout fixes keep the last options out of the footer fade, keep See all / Show less off the scrollbar, and stop the left heading from jumping when the card list expands.
Changes
Question-and-options steps (select, card, right-rail) all use CreateFlowTwoColumnSelectShell.
Removed CreateFlowCardStackStepShell. Communication, membership, and conflict methods now use the two-column shell plus CardStacklayout="singleStack".
Selection sizes: s chip, m compact tile, l full-width row. Legacy orientation still maps horizontal → m and vertical → l.
Split-scroll steps now include the method-card screens: below lg main scrolls; at lg+ only the right column scrolls.
Option columns get pb-12 scroll-end padding so the last chips / controls sit above the 32px footer scrim.
Card-stack See all / Show less is centered and pinned under the cards (Figma compact / expanded / right-rail). Only the cards scroll, so the overlay scrollbar no longer covers the control.
Left lockup stays put on expand: Figma compact title on method steps, full-height split with the heading centered in the left pane.
Docs, create-flow rules, Selection stories, and unit/page tests updated to match.
Screenshots
How to Test
npm run dev and open the create flow.
Walk the option-picking steps at desktop (lg+, two columns) and below lg (stacked, main scrolls):
/create/community-size
/create/community-structure
/create/core-values
/create/communication-methods
/create/membership-methods
/create/decision-approaches
/create/conflict-management
/create/confirm-stakeholders
On communication, membership, conflict, and decision approaches:
Compact list shows a short stack; See all is centered under the cards, not on the right edge.
Expand: heading copy and vertical position do not change; Show less stays visible under the stack while cards scroll; the scrollbar does not cover the control.
Collapse again and confirm the heading still does not jump.
On /create/core-values, scroll all the way down: the last chip row and + Add value should sit clearly above Back / Confirm, not in the footer fade.
Click a method card and confirm the customize modal still opens (Add Platform / Save / Remove unchanged).
Optional: npm run storybook → Selection stories for sizes s / m / l.
Notes
Chip / MultiSelect tag steps stay wrap + custom-add; Selection size s is the chip variant, not a rewrite of MultiSelect.
Compact method stacks still use CardStacksingleStack + size l rows in the right column, not the old centered 3-up Figma tiles. The shared two-column shell is the product layout; Figma compact/expanded/right-rail informed the heading, toggle, and scroll behavior.
expandedTitle strings remain in the method-step message files but are unused.
## Overview
Nine builder steps were using four layouts and four selection idioms. This puts question-and-options steps on one two-column shell and one `Selection` component with size variants, so method cards, chips, and the right rail share the same layout. Follow-up layout fixes keep the last options out of the footer fade, keep See all / Show less off the scrollbar, and stop the left heading from jumping when the card list expands.
## Changes
- Question-and-options steps (select, card, right-rail) all use `CreateFlowTwoColumnSelectShell`.
- Removed `CreateFlowCardStackStepShell`. Communication, membership, and conflict methods now use the two-column shell plus `CardStack` `layout="singleStack"`.
- `Selection` sizes: `s` chip, `m` compact tile, `l` full-width row. Legacy `orientation` still maps `horizontal` → `m` and `vertical` → `l`.
- Split-scroll steps now include the method-card screens: below `lg` main scrolls; at `lg+` only the right column scrolls.
- Option columns get `pb-12` scroll-end padding so the last chips / controls sit above the 32px footer scrim.
- Card-stack **See all / Show less** is centered and pinned under the cards (Figma compact / expanded / right-rail). Only the cards scroll, so the overlay scrollbar no longer covers the control.
- Left lockup stays put on expand: Figma compact title on method steps, full-height split with the heading centered in the left pane.
- Docs, create-flow rules, Selection stories, and unit/page tests updated to match.
## Screenshots
<!-- Attach compact vs See all on /create/communication-methods, and core-values scrolled to the bottom. -->
## How to Test
1. `npm run dev` and open the create flow.
2. Walk the option-picking steps at desktop (`lg+`, two columns) and below `lg` (stacked, main scrolls):
- `/create/community-size`
- `/create/community-structure`
- `/create/core-values`
- `/create/communication-methods`
- `/create/membership-methods`
- `/create/decision-approaches`
- `/create/conflict-management`
- `/create/confirm-stakeholders`
3. On communication, membership, conflict, and decision approaches:
- Compact list shows a short stack; **See all** is centered under the cards, not on the right edge.
- Expand: heading copy and vertical position do not change; **Show less** stays visible under the stack while cards scroll; the scrollbar does not cover the control.
- Collapse again and confirm the heading still does not jump.
4. On `/create/core-values`, scroll all the way down: the last chip row and **+ Add value** should sit clearly above Back / Confirm, not in the footer fade.
5. Click a method card and confirm the customize modal still opens (Add Platform / Save / Remove unchanged).
6. Optional: `npm run storybook` → Selection stories for sizes `s` / `m` / `l`.
## Notes
- Chip / MultiSelect tag steps stay wrap + custom-add; `Selection` size `s` is the chip variant, not a rewrite of MultiSelect.
- Compact method stacks still use `CardStack` `singleStack` + size `l` rows in the right column, not the old centered 3-up Figma tiles. The shared two-column shell is the product layout; Figma compact/expanded/right-rail informed the heading, toggle, and scroll behavior.
- `expandedTitle` strings remain in the method-step message files but are unused.
Method cards, chips, and the right rail now share the two-column shell; last options clear the footer fade, See all stays under the stack, and the left heading no longer jumps when the list expands.
Co-authored-by: Cursor <cursoragent@cursor.com>
an.di
self-assigned this 2026-10-01 23:20:44 +00:00
an.di
merged commit 63d5d21ae0 into main2026-10-01 23:20:53 +00:00
Blocking a user prevents them from interacting with repositories, such as opening or commenting on pull requests or issues. Learn more about blocking a user.
Overview
Nine builder steps were using four layouts and four selection idioms. This puts question-and-options steps on one two-column shell and one
Selectioncomponent with size variants, so method cards, chips, and the right rail share the same layout. Follow-up layout fixes keep the last options out of the footer fade, keep See all / Show less off the scrollbar, and stop the left heading from jumping when the card list expands.Changes
CreateFlowTwoColumnSelectShell.CreateFlowCardStackStepShell. Communication, membership, and conflict methods now use the two-column shell plusCardStacklayout="singleStack".Selectionsizes:schip,mcompact tile,lfull-width row. Legacyorientationstill mapshorizontal→mandvertical→l.lgmain scrolls; atlg+only the right column scrolls.pb-12scroll-end padding so the last chips / controls sit above the 32px footer scrim.Screenshots
How to Test
npm run devand open the create flow.lg+, two columns) and belowlg(stacked, main scrolls):/create/community-size/create/community-structure/create/core-values/create/communication-methods/create/membership-methods/create/decision-approaches/create/conflict-management/create/confirm-stakeholders/create/core-values, scroll all the way down: the last chip row and + Add value should sit clearly above Back / Confirm, not in the footer fade.npm run storybook→ Selection stories for sizess/m/l.Notes
Selectionsizesis the chip variant, not a rewrite of MultiSelect.CardStacksingleStack+ sizelrows in the right column, not the old centered 3-up Figma tiles. The shared two-column shell is the product layout; Figma compact/expanded/right-rail informed the heading, toggle, and scroll behavior.expandedTitlestrings remain in the method-step message files but are unused.