Skip to content

v1.12.2

Choose a tag to compare

@github-actions github-actions released this 04 Jun 03:39
· 8 commits to main since this release
9f823e7

Fix asterisk wrap, stacked buttons, and collapsed field widths

Three theme/structure issues reported on step 3 (and shared across steps), all rooted in how the form's flexbox interacts with Bricks' default flex rules:

  1. Required asterisk dropped to its own line. The label is a flex column, so the bare "First Name" text node and the * became separate stacked flex items. Wrap the visible label text and its required marker in a single .cmm-mf-label-text span so they render inline on one line. Every label in the template now uses this wrapper; the label's own font styling moves to .cmm-mf-label-text.

  2. Back / Continue buttons stacked vertically. .cmm-mf-actions set display: flex and justify-content: center but never pinned flex-direction, so Bricks' default flex-direction: column won. Force flex-direction: row !important (the <=760px media query still switches to column-reverse for mobile).

  3. Fields collapsed to ~half width (e.g. Street Address, the First/Last/Mobile grid) with dead space on the right. The flex-column containers (.cmm-mf, .cmm-mf-panel, .cmm-mf-section, .cmm-mf-new-account, .cmm-mf-label) never set align-items, so the theme's align-items: flex-start/center shrank children to content width instead of stretching. Force align-items: stretch !important and width: 100% on those containers and the grid rows.

Also wrap the directory-checkbox caption in a and force the checkbox row to flex-direction: row so the box and label stay inline.

Bump version to 1.12.2.


Merged from #35 by @sfxdotcom.