The builder used three different page gutters, hid overflow with no continuation cue, sized the shell to 100vh, and let the primary button float away from the content column on wide screens. This PR puts chrome and step content on one layout shell so tablet widths use the available space, the action bar stays on screen on mobile, and the primary button lines up with the nearest content column.
Changes
One gutter scale across the wizard: 20px below md, 48px from md, 64px from lg.
Single-column steps no longer cap at 640px until lg, so a ~1023px tablet is not stuck with a ~639px column.
Wizard frame uses h-dvh / max-h-dvh plus safe-area-inset-bottom on the action bar.
Scroll regions use the design scrollbar; a fade sits above the action bar when content continues below the fold.
Action bar inner width matches the step column (640 / 1328 / 1440) so the primary button does not drift above 1440.
Select steps, including stakeholders, share the question-and-options two-column shell. Communication, membership, and conflict share a card-stack shell.
Screenshots
How to Test
npm run dev and open /create/community-structure (start a new rule if needed).
At 375×667: Maturity can sit below the fold; the inner area scrolls, a scrollbar/fade is visible, and Confirm details stays on screen.
At ~1023px: the content column uses the width inside the gutters, not a 639px strip.
At 1440+ on /create/community-name: Confirm name sits on the right edge of the 640px field, not the viewport.
At 1440+ on /create/community-structure: Confirm details sits on the right edge of the options column.
On a phone or device emulation, confirm the action bar is not covered by browser chrome.
Notes
Real-device iPhone check for dynamic viewport height is still worth a pass in QA; this uses dvh and the home-indicator inset.
Chip selected state, contrast, and the five-value limit already shipped separately; this pass does not redo that work.
## Overview
The builder used three different page gutters, hid overflow with no continuation cue, sized the shell to `100vh`, and let the primary button float away from the content column on wide screens. This PR puts chrome and step content on one layout shell so tablet widths use the available space, the action bar stays on screen on mobile, and the primary button lines up with the nearest content column.
## Changes
- One gutter scale across the wizard: 20px below `md`, 48px from `md`, 64px from `lg`.
- Single-column steps no longer cap at 640px until `lg`, so a ~1023px tablet is not stuck with a ~639px column.
- Wizard frame uses `h-dvh` / `max-h-dvh` plus `safe-area-inset-bottom` on the action bar.
- Scroll regions use the design scrollbar; a fade sits above the action bar when content continues below the fold.
- Action bar inner width matches the step column (640 / 1328 / 1440) so the primary button does not drift above 1440.
- Select steps, including stakeholders, share the question-and-options two-column shell. Communication, membership, and conflict share a card-stack shell.
## Screenshots
## How to Test
1. `npm run dev` and open `/create/community-structure` (start a new rule if needed).
2. At **375×667**: Maturity can sit below the fold; the inner area scrolls, a scrollbar/fade is visible, and Confirm details stays on screen.
3. At **~1023px**: the content column uses the width inside the gutters, not a 639px strip.
4. At **1440+** on `/create/community-name`: Confirm name sits on the right edge of the 640px field, not the viewport.
5. At **1440+** on `/create/community-structure`: Confirm details sits on the right edge of the options column.
6. Spot-check `/create/confirm-stakeholders` (two-column question-and-options) and `/create/communication-methods` (centered lockup + card stack).
7. On a phone or device emulation, confirm the action bar is not covered by browser chrome.
## Notes
- Real-device iPhone check for dynamic viewport height is still worth a pass in QA; this uses `dvh` and the home-indicator inset.
- Chip selected state, contrast, and the five-value limit already shipped separately; this pass does not redo that work.
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
The builder used three different page gutters, hid overflow with no continuation cue, sized the shell to
100vh, and let the primary button float away from the content column on wide screens. This PR puts chrome and step content on one layout shell so tablet widths use the available space, the action bar stays on screen on mobile, and the primary button lines up with the nearest content column.Changes
md, 48px frommd, 64px fromlg.lg, so a ~1023px tablet is not stuck with a ~639px column.h-dvh/max-h-dvhplussafe-area-inset-bottomon the action bar.Screenshots
How to Test
npm run devand open/create/community-structure(start a new rule if needed)./create/community-name: Confirm name sits on the right edge of the 640px field, not the viewport./create/community-structure: Confirm details sits on the right edge of the options column./create/confirm-stakeholders(two-column question-and-options) and/create/communication-methods(centered lockup + card stack).Notes
dvhand the home-indicator inset.