Lite: Fix repeater button styling in form builder

[shervElmi]

Fixes https://github.com/Strategy11/formidable-pro/issues/6142

Updated the repeater Add/Remove buttons in the form builder to match the form preview.

Add-ons Changes

• https://github.com/Strategy11/formidable-pro/pull/6170

[coderabbitai]

Warning

Rate limit exceeded

@shervElmi has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 12 minutes and 24 seconds before requesting another review.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

📥 Commits

Reviewing files that changed from the base of the PR and between c996171 and f708f06.

📒 Files selected for processing (2)

• css/frm_admin.css
• resources/scss/admin/backwards-compatibility/pages/_builder.scss

Walkthrough

Removed global button-specific selectors and refactored .frm-page-break pseudo-elements into nested SCSS syntax in the form-rows builder stylesheet; preserved existing visual rules and positions.

Changes

Cohort / File(s)	Summary
SCSS form-rows adjustments resources/scss/admin/components/builder/_form-rows.scss	Removed global .frm_remove_form_row.frm_button and .frm_add_form_row.frm_button selectors; replaced explicit .frm-page-break::before / ::after with nested &::before / &::after; consolidated button-related styling into nested SCSS blocks while keeping original visual properties.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Possibly related PRs

• Stop using font icon in section field icons in form builder #2146 — Updates to .frm-page-break and builder UI styling that overlap with the page-break and divider changes here.

Suggested reviewers

• Crabcyborg
• garretlaxton

Pre-merge checks

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'Lite: Fix repeater button styling in form builder' directly relates to the changeset, which removes unused button styling and reorganizes CSS for repeater form row buttons.
Description check	✅ Passed	The description references the related issue and explains the purpose of updating repeater Add/Remove button styling in the form builder, which matches the actual CSS changes made to button styling.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[Crabcyborg]

Also @shervElmi,

It looks like the icon buttons are using other styles still.

[shervElmi]

Also @shervElmi,

It looks like the icon buttons are using other styles still.

@Crabcyborg the PR also includes Pro changes, and you can find the Pro PR in the description.

[Crabcyborg]

@shervElmi That's only a size change? I'm seeing issues with colour.

[Crabcyborg]

@shervElmi If I have that branch checked out, it still doesn't reflect the icon I have selected in my style.

I'm wondering if we want to bother with parts of this update though. The builder isn't really 100% the same as the style. Since the builder does not have a background colour, we don't really want to show a white button here in the builder.

I think we should at least show the right icon though, since that shouldn't cause any issues.

[shervElmi]

@Crabcyborg, I just want to make sure we are on the same page.

If a user changes the Repeater field icons, do you want me to use that icon in the Form Builder as well, where we build forms and not on the Style page?

If yes, with the icon you selected, the same background will appear in the Form Builder, and the frontend also have a background for that icon since the icon itself includes one.

Could you please clarify what you would like me to do exactly, aside from moving the styles to builder.css in the Pro add on?

---

I have applied the icon you selected in the Form Builder page to illustrate what it would look like with that icon:

[Crabcyborg]

@shervElmi I think it would be best if we showed the repeater icons on both pages. The styler already supports this, but the builder doesn't.

We can also apply some style settings. I just don't think we should modify colour, as it's at risk of causing visibility issues.

[shervElmi]

@Crabcyborg, this PR and the related Pro PR are ready to merge.

The buttons styles are now consistent across all pages, including the Builder, Style, and frontend.

Builder Page

Style Page

Frontend