QA pass: layout, create-flow, and About books #68

Merged
an.di merged 38 commits from adilallo/fix/CR-129-create-rule-button into main 2026-08-26 15:46:56 +00:00
Owner

Overview

Follow-up from a QA pass against Figma and the live flows. Mixed layout and behavior fixes across home, About, Learn, articles, the create wizard, and save-progress login — not a single feature.

Changes

  • Match partner logo wall spacing and sizes to Figma on every breakpoint.
  • Use filled invert for the top-nav Create rule button.
  • Keep ticket IDs out of comments, commits, and PR copy.
  • Align hero lockup type with Display and Paragraph styles.
  • Paint hero decoration as a solid darker-accent fill.
  • Keep process-card numerals upright and match Display type and section gaps.
  • Match Rule card type and section gaps to the template grid.
  • Keep space under the guide logo and align header and body.
  • Clip content-template ornaments at the frame so they do not overlap copy.
  • Hug the standard header to Create rule with Figma vertical padding.
  • Keep the templates button on the Rule stack’s Figma gap.
  • Keep Triple Step art flush to the section’s right edge.
  • Cap Rule stack section titles at the Figma 3-line width so they wrap instead of stretching on wide viewports.
  • Cap every page at 1920px so layouts stop stretching on ultrawide viewports.
  • Match Triple Text padding and title width to the Figma frames so the section does not over-inset or cap too early.
  • Limit the Use Cases tools row to the three catalog articles, make it mouse-draggable instead of auto-advancing, and put card titles on Bricolage Grotesque so they match the design.
  • Center leftover Learn cards on a short last row and keep thumbnail copy in the top half so it does not cover the artwork.
  • Let the content-page article column fill the 1440+ template gutters so it does not stay capped at 904px on wider viewports.
  • Take the article page color from the section banner SVG so the body cannot drift from the hero on current or future posts.
  • Use each catalog article’s Figma body ornaments instead of one shared pair.
  • Let the About Triple Text row fill the padded width so the columns are not capped at 1440px on wide viewports.
  • Apply the FAQ Small, Medium, and Large variants at the matching breakpoints so the About accordion is not using desktop inset and type on tablet.
  • Point the About book download at Structure Before Crisis, then show both books with matching covers and downloads (Structure Before Crisis and Community Rules).
  • Scale About Header inline marks to the 320, 640, and 1440 variants so the 1440 sizes do not apply from tablet up.
  • Center lockup-plus-card and card-stack create-flow steps in the nav–footer band so they are not stuck under the header when the content is shorter than the viewport.
  • Let core-value meaning and signals be edited on first open with Add Value, confirm discard when closing without adding, and pin Keep editing to the footer back slot.
  • Route kebab Customize through the prefilled policy wizard so existing methods and values can be renamed, reordered, and kept in that field order on the card after Finalize.
  • Keep catalog method section editors after a Customize title override so Core Principle and related copy are not replaced by an empty custom-policy body.
  • Keep See-all method cards at the compact 142px tile height so expanded rows do not stretch with badges and wrapping copy.
  • Hide unused helper marks on selection cards and modal section labels until tooltip behavior ships.
  • Treat review-page value modals as unchanged when field blocks match the open snapshot so close does not ask to discard a view-only visit.
  • Start Add value in the empty custom-policy wizard so Finalize can save a selected chip named from the title.
  • Let decision-approaches wrap at narrow widths and sync key-resource scopes.
  • Close method-card Save like first add, keep key-resource chips on the approach they were chosen for, and leave expanded See-all stacks in catalog order.
  • Align custom policy details with the Figma create modal so the add-field control, copy, and labels match the intended styling.
  • Stop treating login/save-progress as a 48-character email limit (method-card support text was the real cap).
  • Send FeatureGrid Learn more to the Learn page instead of a dead hash link.

How to Test

  1. npm run dev
  2. Home at 320 / 640 / 1440 / ≥1920: logo wall, hero lockup and darker-accent decoration, process-card numerals, Rule stack title wrap and templates-button gap, Triple Step flush right, Triple Text padding, FeatureGrid Learn more/learn (cards still do not navigate), Create rule filled invert, header hugging Create rule.
  3. Learn: leftover cards centered on a short last row; thumbnail copy in the top half; Use Cases tools row is three catalog articles, mouse-draggable, Bricolage Grotesque titles.
  4. A catalog article: column fills 1440+ gutters; body color matches the section banner SVG; ornaments are that article’s pair and do not overlap copy.
  5. About: Triple Text fills padded width; FAQ Small/Medium/Large at those breakpoints; Header marks at 320 / 640 / 1440; two book sections with matching cover, heading, alt, and PDF each.
  6. Create: short lockup-plus-card / card-stack steps sit in the nav–footer band; Add Value meaning/signals, discard confirm, Keep editing in the footer back slot; Customize kebab is the prefilled wizard and keeps catalog editors after a title override; See-all tiles stay 142px and catalog order when expanded; helper marks hidden; review value modal close without a false discard; Add value empty wizard then Finalize; decision-approaches wrap; Save closes like first add; custom policy details match the create modal; save-progress overlay accepts a normal email with no 48-character error and no Back to home.

Notes

  • FeatureGrid cards still have no destinations.
  • Helper marks on selection cards and modal labels stay hidden until tooltips ship.
  • About Download Book uses bundled PDFs, not an external purchase page.
  • An earlier commit on this branch replaced the 2021 booklet with Structure Before Crisis only; the later commit restores both books (Community Rules = governance-booklet.pdf, Structure Before Crisis = structure-before-crisis.pdf).
## Overview Follow-up from a QA pass against Figma and the live flows. Mixed layout and behavior fixes across home, About, Learn, articles, the create wizard, and save-progress login — not a single feature. ## Changes - Match partner logo wall spacing and sizes to Figma on every breakpoint. - Use filled invert for the top-nav Create rule button. - Keep ticket IDs out of comments, commits, and PR copy. - Align hero lockup type with Display and Paragraph styles. - Paint hero decoration as a solid darker-accent fill. - Keep process-card numerals upright and match Display type and section gaps. - Match Rule card type and section gaps to the template grid. - Keep space under the guide logo and align header and body. - Clip content-template ornaments at the frame so they do not overlap copy. - Hug the standard header to Create rule with Figma vertical padding. - Keep the templates button on the Rule stack’s Figma gap. - Keep Triple Step art flush to the section’s right edge. - Cap Rule stack section titles at the Figma 3-line width so they wrap instead of stretching on wide viewports. - Cap every page at 1920px so layouts stop stretching on ultrawide viewports. - Match Triple Text padding and title width to the Figma frames so the section does not over-inset or cap too early. - Limit the Use Cases tools row to the three catalog articles, make it mouse-draggable instead of auto-advancing, and put card titles on Bricolage Grotesque so they match the design. - Center leftover Learn cards on a short last row and keep thumbnail copy in the top half so it does not cover the artwork. - Let the content-page article column fill the 1440+ template gutters so it does not stay capped at 904px on wider viewports. - Take the article page color from the section banner SVG so the body cannot drift from the hero on current or future posts. - Use each catalog article’s Figma body ornaments instead of one shared pair. - Let the About Triple Text row fill the padded width so the columns are not capped at 1440px on wide viewports. - Apply the FAQ Small, Medium, and Large variants at the matching breakpoints so the About accordion is not using desktop inset and type on tablet. - Point the About book download at Structure Before Crisis, then show both books with matching covers and downloads (Structure Before Crisis and Community Rules). - Scale About Header inline marks to the 320, 640, and 1440 variants so the 1440 sizes do not apply from tablet up. - Center lockup-plus-card and card-stack create-flow steps in the nav–footer band so they are not stuck under the header when the content is shorter than the viewport. - Let core-value meaning and signals be edited on first open with Add Value, confirm discard when closing without adding, and pin Keep editing to the footer back slot. - Route kebab Customize through the prefilled policy wizard so existing methods and values can be renamed, reordered, and kept in that field order on the card after Finalize. - Keep catalog method section editors after a Customize title override so Core Principle and related copy are not replaced by an empty custom-policy body. - Keep See-all method cards at the compact 142px tile height so expanded rows do not stretch with badges and wrapping copy. - Hide unused helper marks on selection cards and modal section labels until tooltip behavior ships. - Treat review-page value modals as unchanged when field blocks match the open snapshot so close does not ask to discard a view-only visit. - Start Add value in the empty custom-policy wizard so Finalize can save a selected chip named from the title. - Let decision-approaches wrap at narrow widths and sync key-resource scopes. - Close method-card Save like first add, keep key-resource chips on the approach they were chosen for, and leave expanded See-all stacks in catalog order. - Align custom policy details with the Figma create modal so the add-field control, copy, and labels match the intended styling. - Stop treating login/save-progress as a 48-character email limit (method-card support text was the real cap). - Send FeatureGrid Learn more to the Learn page instead of a dead hash link. ## How to Test 1. `npm run dev` 2. Home at 320 / 640 / 1440 / ≥1920: logo wall, hero lockup and darker-accent decoration, process-card numerals, Rule stack title wrap and templates-button gap, Triple Step flush right, Triple Text padding, FeatureGrid **Learn more** → `/learn` (cards still do not navigate), Create rule filled invert, header hugging Create rule. 3. Learn: leftover cards centered on a short last row; thumbnail copy in the top half; Use Cases tools row is three catalog articles, mouse-draggable, Bricolage Grotesque titles. 4. A catalog article: column fills 1440+ gutters; body color matches the section banner SVG; ornaments are that article’s pair and do not overlap copy. 5. About: Triple Text fills padded width; FAQ Small/Medium/Large at those breakpoints; Header marks at 320 / 640 / 1440; two book sections with matching cover, heading, alt, and PDF each. 6. Create: short lockup-plus-card / card-stack steps sit in the nav–footer band; Add Value meaning/signals, discard confirm, Keep editing in the footer back slot; Customize kebab is the prefilled wizard and keeps catalog editors after a title override; See-all tiles stay 142px and catalog order when expanded; helper marks hidden; review value modal close without a false discard; Add value empty wizard then Finalize; decision-approaches wrap; Save closes like first add; custom policy details match the create modal; save-progress overlay accepts a normal email with no 48-character error and no Back to home. ## Notes - FeatureGrid cards still have no destinations. - Helper marks on selection cards and modal labels stay hidden until tooltips ship. - About Download Book uses bundled PDFs, not an external purchase page. - An earlier commit on this branch replaced the 2021 booklet with Structure Before Crisis only; the later commit restores both books (Community Rules = `governance-booklet.pdf`, Structure Before Crisis = `structure-before-crisis.pdf`).
an.di added 38 commits 2026-08-26 15:46:25 +00:00
Restore asset/Logo import casing so Turbopack can resolve the module, and align the site lockup gaps with the Figma Asset/Logo instances.

Co-authored-by: Cursor <cursoragent@cursor.com>
Matches the Figma Filled Invert variant so the label stays white on the dark pill.

Co-authored-by: Cursor <cursoragent@cursor.com>
Branch names still carry the ticket; the code and PR prose should not.

Co-authored-by: Cursor <cursoragent@cursor.com>
Use 110% heading line-height, 14px subhead under 430, and pin Bricolage optical size so Medium stays Medium.

Co-authored-by: Cursor <cursoragent@cursor.com>
Figma uses a normal fill, not opacity, stacked paths, or multiply grain.

Co-authored-by: Cursor <cursoragent@cursor.com>
Rotate only the numbered shapes, use 24/32 and 32/1.1 card copy, and tighten the header-to-CTA stack.

Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: Cursor <cursoragent@cursor.com>
Drop the mid-width side gutter so the 1:2 ornament column meets the viewport from md up, while copy keeps its left inset.

Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: Cursor <cursoragent@cursor.com>
The info-box checkboxes overflowed in a squeezed column; wrapping them and offering those scopes as chips on every approach keeps the sidebar and Applicable Scope selection in sync without publishing unchecked keys as defaults.

Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: Cursor <cursoragent@cursor.com>
The overlay was failing Zod on preset method-card support text attached with the draft; raise that cap, allow RFC-length emails, and drop Back to home from the overlay.

Co-authored-by: Cursor <cursoragent@cursor.com>
The section mixed Structure Before Crisis art with the Community Rules booklet; pairing each title to its own cover and PDF, and cropping the Figma cover padding, keeps the two cards consistent.

Co-authored-by: Cursor <cursoragent@cursor.com>
an.di self-assigned this 2026-08-26 15:46:34 +00:00
an.di merged commit bf4020005a into main 2026-08-26 15:46:56 +00:00
an.di deleted branch adilallo/fix/CR-129-create-rule-button 2026-08-26 15:46:56 +00:00
Sign in to join this conversation.
No Reviewers
No labels
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: CommunityRule/community-rule#68