CommunityRule/community-rule
2
0 Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Standardize create-flow option steps on one question-and-options layout and Selection sizes.

Browse Source 
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>
This commit is contained in:
adilalloandCursor committed 2026-10-01 17:18:04 -06:00
1 parent 2fc7fbf818
commit 24a9615c0c
26 files changed
+354 -245
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

app/(app)/create/components/CreateFlowTwoColumnSelectShell.tsx
+8 -8
View File
@@ -7,6 +7,7 @@ import {
} from "./CreateFlowStepShell";
import {
CREATE_FLOW_MD_UP_COLUMN_MAX_CLASS,
CREATE_FLOW_SCROLL_END_PAD_CLASS,
CREATE_FLOW_SCROLL_REGION_CLASS,
CREATE_FLOW_TWO_COLUMN_MAX_WIDTH_CLASS,
} from "./createFlowLayoutTokens";
@@ -23,15 +24,17 @@ interface CreateFlowTwoColumnSelectShellProps {
contentTopBelowMd?: CreateFlowContentTopBelowMd;
/**
* At `lg+`, layout variant: `"center"` = vertically centered pair (community size/structure).
* `"start"` = top-weighted layout with a scrollable right column (core values, right-rail): uses `items-stretch`
* so the right column gets a bounded height; `items-start` would grow with content and break scroll.
* `"start"` = full-height split with a scrollable right column (core values, method cards,
* right-rail). Both columns stretch so the left lockup stays in one place when the right
* list grows (Figma Flow — Right Rail / Expanded Card Stack). The lockup is centered in
* the left pane; `items-start` on the row would let the title track card-stack height.
*/
lgVerticalAlign?: CreateFlowSelectShellLgVerticalAlign;
}
/**
* Question-and-options layout for create-flow select steps (community size/structure,
* core values, stakeholders) and {@link DecisionApproachesScreen}.
* core values, stakeholders), method-card steps, and {@link DecisionApproachesScreen}.
* Below `lg` (1024px), one column uses available width and main scrolls.
* At `lg+`, static header column + scrollable options column (`min-h-0` + overflow).
*/
@@ -45,9 +48,6 @@ export function CreateFlowTwoColumnSelectShell({
const rowLgCrossAlignClass =
lgVerticalAlign === "start" ? "lg:items-stretch" : "lg:items-center";
const leftLgMainJustifyClass =
lgVerticalAlign === "start" ? "lg:justify-start" : "lg:justify-center";
return (
<CreateFlowStepShell
variant="centeredNarrow"
@@ -68,7 +68,7 @@ export function CreateFlowTwoColumnSelectShell({
<div
className={
`flex w-full min-w-0 shrink-0 flex-col items-start gap-[var(--measures-spacing-200,8px)] ` +
`lg:flex-1 ${leftLgMainJustifyClass} lg:py-[12px] ${CREATE_FLOW_MD_UP_COLUMN_MAX_CLASS}`
`lg:flex-1 lg:justify-center lg:py-[12px] ${CREATE_FLOW_MD_UP_COLUMN_MAX_CLASS}`
}
>
{header}
@@ -76,7 +76,7 @@ export function CreateFlowTwoColumnSelectShell({
<div
className={
`relative flex w-full min-w-0 flex-col items-start gap-[var(--measures-spacing-800,32px)] ` +
`overflow-x-hidden lg:min-h-0 lg:flex-1 lg:overflow-y-auto lg:pb-[var(--measures-spacing-300,12px)] ` +
`overflow-x-hidden lg:min-h-0 lg:flex-1 lg:overflow-y-auto ${CREATE_FLOW_SCROLL_END_PAD_CLASS} ` +
`${CREATE_FLOW_SCROLL_REGION_CLASS} ${CREATE_FLOW_MD_UP_COLUMN_MAX_CLASS}`
}
>