Fix checked radio input not centered

[truongwp]

Sherv reported this here https://linear.app/strategy11/document/feature-handoff-fa53db562784#comment-b8659162

I'm not sure why we set them to 15px.

Summary by CodeRabbit

• Style
  • Adjusted sizing of checkboxes and radio buttons in form controls for improved visual consistency across the admin interface.

[coderabbitai]

📝 Walkthrough

Walkthrough

The pull request updates the sizing dimensions of checkbox and radio button form controls in the admin styling, increasing their width, minimum-width, and height properties from 15 pixels to 16 pixels.

Changes

Cohort / File(s)	Summary
Checkbox and Radio Input Sizing resources/scss/admin/components/form/_fields-part2.scss	Updated input[type="checkbox"] and input[type="radio"] dimensions: width, min-width, and height increased from 15px to 16px.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~2 minutes

Poem

🐰 A pixel here, a pixel there,
We made the boxes bigger, fair!
From fifteen to sixteen they grew,
Checkboxes dressed in something new! ✓

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'Fix checked radio input not centered' directly relates to the main change in the pull request, which increases checkbox and radio input sizing from 15px to 16px to address centering issues.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix-checked-radio-in-form-builder

---

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.}

[deepsource-io]

DeepSource Code Review

We reviewed changes in 1fa0718...1e2d1b3 on this pull request. Below is the summary for the review, and you can see the individual issues we found as inline review comments.

See full review on DeepSource ↗

PR Report Card

Overall Grade

Security   Reliability   Complexity   Hygiene

Code Review Summary

Analyzer	Status	Updated (UTC)	Details
PHP		Apr 10, 2026 4:56p.m.	Review ↗
JavaScript		Apr 10, 2026 4:56p.m.	Review ↗

---

Important

AI Review is run only on demand for your team. We're only showing results of static analysis review right now. To trigger AI Review, comment @deepsourcebot review on this thread.

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@resources/scss/admin/components/form/_fields-part2.scss`:
- Around line 13-15: The base rule in
resources/scss/admin/components/form/_fields-part2.scss adds min-width: 16px and
height: 16px which conflicts with responsive overrides that only change width;
either remove min-width and height from the base (so this file mirrors
_fields.scss which only sets width and padding) or update the responsive rules
(e.g., in resources/scss/admin/components/form/_screen-tablet.scss and the
single-entry breakpoint) to explicitly override min-width and height to match
the responsive width (e.g., set min-width and height to 25px for tablet and 18px
for single-entry) so the inputs remain square and proportional across
breakpoints.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: ec58f25c-d6a2-417c-9410-d17f91957112

📥 Commits

Reviewing files that changed from the base of the PR and between 1fa0718 and 1e2d1b3.

📒 Files selected for processing (2)

• css/frm_admin.css
• resources/scss/admin/components/form/_fields-part2.scss

[coderabbitai]

⚠️ Potential issue | 🔴 Critical

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# Description: Verify that tablet media queries properly override these dimensions

# Check tablet media query file for responsive sizing
rg -A2 -B2 'frm_radio input\[type="radio"\]|frm_checkbox input\[type="checkbox"\]' resources/scss/admin/media-queries/_screen-tablet.scss

Repository: Strategy11/formidable-forms

Length of output: 389

---

🏁 Script executed:

# First, let's see the full context of the changed lines and surrounding code
cat -n resources/scss/admin/components/form/_fields-part2.scss | head -30

Repository: Strategy11/formidable-forms

Length of output: 1034

---

🏁 Script executed:

# Check if there are any other responsive rules that might affect these inputs
rg -A3 'frm_radio input\[type="radio"\]|frm_checkbox input\[type="checkbox"\]' resources/scss/admin/media-queries/

Repository: Strategy11/formidable-forms

Length of output: 936

---

🏁 Script executed:

# Verify git history to see what the change actually was (before/after)
git diff HEAD~1 resources/scss/admin/components/form/_fields-part2.scss | head -50

Repository: Strategy11/formidable-forms

Length of output: 257

---

🏁 Script executed:

# Search all media query files for height and min-width overrides for these inputs
rg 'height|min-width' resources/scss/admin/media-queries/ -B2 -A2 | grep -A2 -B2 'input\[type="radio"\]\|input\[type="checkbox"\]'

Repository: Strategy11/formidable-forms

Length of output: 381

---

🏁 Script executed:

# Also check the main responsive files to see full picture
ls -la resources/scss/admin/media-queries/

Repository: Strategy11/formidable-forms

Length of output: 520

---

🏁 Script executed:

# Check all responsive files for complete input rules
for file in resources/scss/admin/media-queries/*.scss; do
  echo "=== $(basename $file) ===";
  rg -A5 'input\[type="radio"\]|input\[type="checkbox"\]' "$file" | grep -E "(width|height|min-width|input\[type)" | head -20;
done

Repository: Strategy11/formidable-forms

Length of output: 655

---

🏁 Script executed:

# Let's also check the original _fields.scss to see base sizing there
rg -A10 'input\[type="radio"\]|input\[type="checkbox"\]' resources/scss/admin/components/form/_fields.scss | head -40

Repository: Strategy11/formidable-forms

Length of output: 330

---

🏁 Script executed:

# Verify the exact content of _fields.scss to confirm no min-width/height
cat -n resources/scss/admin/components/form/_fields.scss | grep -A15 'input\[type="radio"\]'

Repository: Strategy11/formidable-forms

Length of output: 503

---

Add responsive overrides for min-width and height, or reconsider the base sizing approach.

The change introduces a responsive design issue: while the responsive rules override width to 25px (tablet) and 18px (single-entry), they don't override min-width or height (both remain 16px). This creates rectangular inputs at larger breakpoints instead of proportional sizing, and min-width: 16px may constrain the intended width expansion.

The original base rule in _fields.scss only sets width and padding, without min-width or height. Either:

1. Remove min-width and height from the base styles and rely only on width (consistent with the original pattern), OR
2. Update the responsive rules in _screen-tablet.scss to override all three properties (e.g., width: 25px; min-width: 25px; height: 25px;)

Verify your intended layout and update responsive rules accordingly.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@resources/scss/admin/components/form/_fields-part2.scss` around lines 13 -
15, The base rule in resources/scss/admin/components/form/_fields-part2.scss
adds min-width: 16px and height: 16px which conflicts with responsive overrides
that only change width; either remove min-width and height from the base (so
this file mirrors _fields.scss which only sets width and padding) or update the
responsive rules (e.g., in
resources/scss/admin/components/form/_screen-tablet.scss and the single-entry
breakpoint) to explicitly override min-width and height to match the responsive
width (e.g., set min-width and height to 25px for tablet and 18px for
single-entry) so the inputs remain square and proportional across breakpoints.