contribution page ui#1664
Open
tarunnjoshi wants to merge 1 commit into
Open
Conversation
WalkthroughThis PR adds responsive two-column grid layout styling to CRM contribution form profile fields. Both the SCSS source ( ChangesCRM Profile Grid Layout
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Possibly related PRs
Suggested labels
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 inconclusive)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Warning Review ran into problems🔥 ProblemsGit: Failed to clone repository. Please run the 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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (1)
wp-content/themes/goonj-crm/style.css (1)
202-221: 💤 Low valueMissing
row-gapleaves vertically stacked field pairs without explicit spacing.
column-gap: 24pxis set, but there is norow-gap. Unless the individual.crm-sectionelements already carry sufficientmargin-bottom, form field rows may sit flush against each other in the two-column layout.♻️ Proposed addition
`#crm-main-content-wrapper` form .crm-block.crm-contribution-main-form-block .crm-public-form-item .crm-profile { display: grid !important; grid-template-columns: 1fr 1fr; column-gap: 24px; + row-gap: 16px; /* adjust to match design */ }🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@wp-content/themes/goonj-crm/style.css` around lines 202 - 221, Add an explicit vertical gap to the grid by adding a row-gap to the selector "#crm-main-content-wrapper form .crm-block.crm-contribution-main-form-block .crm-public-form-item .crm-profile" (and mirror in the mobile `@media` rule if needed); ensure row-gap (e.g., 24px or a theme spacing variable) is set so stacked two-column rows (.crm-section) have consistent vertical spacing between rows as well as the existing column-gap.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@wp-content/themes/goonj-crm/assets/styles/goonj-main.scss`:
- Around line 283-285: The media query breakpoint for the new grid-reset is off
by 1px; update the rule that currently uses `@media` (max-width: 768px) so it
matches the existing mobile range by using max-width: 769px (or change both
queries to a consistent boundary), ensuring the single-column grid rule and the
existing `.crm-profile div { width: 82vw !important; }` breakpoint align and
prevent the brief two-column/82vw layout at exactly 769px.
- Around line 260-286: Add a mobile override in this SCSS to prevent the global
`.crm-block .crm-public-form-item .crm-profile div { width: 82vw !important }`
rule from breaking the contribution two-column grid: inside the existing `@media`
(max-width: 768px) block, add a rule targeting the contribution selector
`#crm-main-content-wrapper form .crm-block.crm-contribution-main-form-block
.crm-public-form-item .crm-profile > div` and set `width: auto !important;` (or
`width: 100% !important;`) so contribution-page profile fields respect the grid
instead of the global 82vw rule.
In `@wp-content/themes/goonj-crm/style.css`:
- Around line 202-221: The mobile 82vw rule is overriding your grid sizing; add
an explicit override to reset width inside the contribution form context so grid
items don't get forced to 82vw—for example, within the
.crm-contribution-main-form-block scope (targeting `#crm-main-content-wrapper`
form .crm-block.crm-contribution-main-form-block .crm-public-form-item
.crm-profile and its direct .crm-section children) add a rule that sets width:
auto !important (and/or max-width: 100% !important) for the inner divs/elements
(e.g., the selector matching .crm-profile > .crm-section div or .crm-profile
.crm-section) and include that override inside your existing `@media` (max-width:
768px) block so it neutralizes the 82vw rule on small screens.
---
Nitpick comments:
In `@wp-content/themes/goonj-crm/style.css`:
- Around line 202-221: Add an explicit vertical gap to the grid by adding a
row-gap to the selector "#crm-main-content-wrapper form
.crm-block.crm-contribution-main-form-block .crm-public-form-item .crm-profile"
(and mirror in the mobile `@media` rule if needed); ensure row-gap (e.g., 24px or
a theme spacing variable) is set so stacked two-column rows (.crm-section) have
consistent vertical spacing between rows as well as the existing column-gap.
🪄 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: Repository UI
Review profile: CHILL
Plan: Pro
Run ID: c3a862f5-ec80-4ef0-a073-89f6039920ff
📒 Files selected for processing (2)
wp-content/themes/goonj-crm/assets/styles/goonj-main.scsswp-content/themes/goonj-crm/style.css
Comment on lines
+260
to
+286
| // Two-column layout for contribution-page profile fields. Pairs simple text | ||
| // inputs (First/Last Name, Email/Mobile, State/City, etc.) and keeps wide | ||
| // fields (street address, checkboxes/radios) full-width via :has() rather | ||
| // than pinning custom-field IDs (which differ between staging and prod). | ||
| // Selector specificity matches the existing `.crm-profile { display: block }` | ||
| // rule above to override it without !important on the grid setup. | ||
| #crm-main-content-wrapper form .crm-block.crm-contribution-main-form-block .crm-public-form-item .crm-profile { | ||
| display: grid !important; | ||
| grid-template-columns: 1fr 1fr; | ||
| column-gap: 24px; | ||
|
|
||
| > .crm-section { | ||
| width: auto !important; | ||
| } | ||
|
|
||
| > .crm-section:has(textarea), | ||
| > .crm-section:has(input[type="checkbox"]), | ||
| > .crm-section:has(input[type="radio"]), | ||
| > .crm-section:has(.crm-multiple-checkbox-radio-options), | ||
| > .crm-section[class*="street_address"] { | ||
| grid-column: 1 / -1; | ||
| } | ||
|
|
||
| @media (max-width: 768px) { | ||
| grid-template-columns: 1fr; | ||
| } | ||
| } |
There was a problem hiding this comment.
Root cause of the mobile grid conflict lives here — fix it in the SCSS.
The width: 82vw !important rule at the existing mobile query (line 469–479 in this file) targets .crm-block .crm-public-form-item .crm-profile div, which covers contribution pages. The fix should be applied in this file so the compiled style.css stays in sync automatically (no manual edits to the compiled output):
🛡️ Proposed SCSS fix
`@media` (max-width: 768px) {
grid-template-columns: 1fr;
+
+ // Neutralise the generic 82vw rule that applies to all .crm-profile div
+ > .crm-section {
+ width: auto !important;
+ }
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| // Two-column layout for contribution-page profile fields. Pairs simple text | |
| // inputs (First/Last Name, Email/Mobile, State/City, etc.) and keeps wide | |
| // fields (street address, checkboxes/radios) full-width via :has() rather | |
| // than pinning custom-field IDs (which differ between staging and prod). | |
| // Selector specificity matches the existing `.crm-profile { display: block }` | |
| // rule above to override it without !important on the grid setup. | |
| #crm-main-content-wrapper form .crm-block.crm-contribution-main-form-block .crm-public-form-item .crm-profile { | |
| display: grid !important; | |
| grid-template-columns: 1fr 1fr; | |
| column-gap: 24px; | |
| > .crm-section { | |
| width: auto !important; | |
| } | |
| > .crm-section:has(textarea), | |
| > .crm-section:has(input[type="checkbox"]), | |
| > .crm-section:has(input[type="radio"]), | |
| > .crm-section:has(.crm-multiple-checkbox-radio-options), | |
| > .crm-section[class*="street_address"] { | |
| grid-column: 1 / -1; | |
| } | |
| @media (max-width: 768px) { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| // Two-column layout for contribution-page profile fields. Pairs simple text | |
| // inputs (First/Last Name, Email/Mobile, State/City, etc.) and keeps wide | |
| // fields (street address, checkboxes/radios) full-width via :has() rather | |
| // than pinning custom-field IDs (which differ between staging and prod). | |
| // Selector specificity matches the existing `.crm-profile { display: block }` | |
| // rule above to override it without !important on the grid setup. | |
| `#crm-main-content-wrapper` form .crm-block.crm-contribution-main-form-block .crm-public-form-item .crm-profile { | |
| display: grid !important; | |
| grid-template-columns: 1fr 1fr; | |
| column-gap: 24px; | |
| > .crm-section { | |
| width: auto !important; | |
| } | |
| > .crm-section:has(textarea), | |
| > .crm-section:has(input[type="checkbox"]), | |
| > .crm-section:has(input[type="radio"]), | |
| > .crm-section:has(.crm-multiple-checkbox-radio-options), | |
| > .crm-section[class*="street_address"] { | |
| grid-column: 1 / -1; | |
| } | |
| `@media` (max-width: 768px) { | |
| grid-template-columns: 1fr; | |
| // Neutralise the generic 82vw rule that applies to all .crm-profile div | |
| > .crm-section { | |
| width: auto !important; | |
| } | |
| } | |
| } |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@wp-content/themes/goonj-crm/assets/styles/goonj-main.scss` around lines 260 -
286, Add a mobile override in this SCSS to prevent the global `.crm-block
.crm-public-form-item .crm-profile div { width: 82vw !important }` rule from
breaking the contribution two-column grid: inside the existing `@media`
(max-width: 768px) block, add a rule targeting the contribution selector
`#crm-main-content-wrapper form .crm-block.crm-contribution-main-form-block
.crm-public-form-item .crm-profile > div` and set `width: auto !important;` (or
`width: 100% !important;`) so contribution-page profile fields respect the grid
instead of the global 82vw rule.
Comment on lines
+283
to
+285
| @media (max-width: 768px) { | ||
| grid-template-columns: 1fr; | ||
| } |
There was a problem hiding this comment.
Breakpoint boundary (768 px) is 1 px off the existing mobile query (769 px).
The existing media query is (min-width: 340px) and (max-width: 769px); the new one is (max-width: 768px). At exactly 769 px the old .crm-profile div { width: 82vw !important; } still fires but the new single-column reset does not, so a two-column grid with 82 vw items is briefly possible. Align both breakpoints:
♻️ Proposed fix
- `@media` (max-width: 768px) {
+ `@media` (max-width: 769px) {
grid-template-columns: 1fr;
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| @media (max-width: 768px) { | |
| grid-template-columns: 1fr; | |
| } | |
| `@media` (max-width: 769px) { | |
| grid-template-columns: 1fr; | |
| } |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@wp-content/themes/goonj-crm/assets/styles/goonj-main.scss` around lines 283 -
285, The media query breakpoint for the new grid-reset is off by 1px; update the
rule that currently uses `@media` (max-width: 768px) so it matches the existing
mobile range by using max-width: 769px (or change both queries to a consistent
boundary), ensuring the single-column grid rule and the existing `.crm-profile
div { width: 82vw !important; }` breakpoint align and prevent the brief
two-column/82vw layout at exactly 769px.
Comment on lines
+202
to
+221
| #crm-main-content-wrapper form .crm-block.crm-contribution-main-form-block .crm-public-form-item .crm-profile { | ||
| display: grid !important; | ||
| grid-template-columns: 1fr 1fr; | ||
| column-gap: 24px; | ||
| } | ||
| #crm-main-content-wrapper form .crm-block.crm-contribution-main-form-block .crm-public-form-item .crm-profile > .crm-section { | ||
| width: auto !important; | ||
| } | ||
| #crm-main-content-wrapper form .crm-block.crm-contribution-main-form-block .crm-public-form-item .crm-profile > .crm-section:has(textarea), | ||
| #crm-main-content-wrapper form .crm-block.crm-contribution-main-form-block .crm-public-form-item .crm-profile > .crm-section:has(input[type=checkbox]), | ||
| #crm-main-content-wrapper form .crm-block.crm-contribution-main-form-block .crm-public-form-item .crm-profile > .crm-section:has(input[type=radio]), | ||
| #crm-main-content-wrapper form .crm-block.crm-contribution-main-form-block .crm-public-form-item .crm-profile > .crm-section:has(.crm-multiple-checkbox-radio-options), | ||
| #crm-main-content-wrapper form .crm-block.crm-contribution-main-form-block .crm-public-form-item .crm-profile > .crm-section[class*=street_address] { | ||
| grid-column: 1/-1; | ||
| } | ||
| @media (max-width: 768px) { | ||
| #crm-main-content-wrapper form .crm-block.crm-contribution-main-form-block .crm-public-form-item .crm-profile { | ||
| grid-template-columns: 1fr; | ||
| } | ||
| } |
There was a problem hiding this comment.
Existing mobile width: 82vw !important rule will conflict with the new grid on small screens.
At lines 350–352 (later in the cascade), the existing rule:
`#crm-main-content-wrapper` form .crm-block .crm-public-form-item .crm-profile div {
width: 82vw !important;
}applies to any .crm-section inside .crm-profile (they are divs), and it fires on .crm-contribution-main-form-block pages as well because the selector is a superset. On mobile screens this overrides the grid item sizing — in a 1-column grid items are forced to 82vw regardless of the container width, potentially causing overflow. At exactly 769px (where the old query fires but the new 768px breakpoint does not), 82vw is applied to each half-column of a still two-column grid.
Consider adding an explicit override inside the new grid rule, or expanding the existing mobile block to neutralise the 82vw constraint for this context:
🛡️ Proposed fix
`@media` (max-width: 768px) {
`#crm-main-content-wrapper` form .crm-block.crm-contribution-main-form-block .crm-public-form-item .crm-profile {
grid-template-columns: 1fr;
}
+ /* Prevent the generic 82vw rule from breaking grid items */
+ `#crm-main-content-wrapper` form .crm-block.crm-contribution-main-form-block .crm-public-form-item .crm-profile div {
+ width: auto !important;
+ }
}🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@wp-content/themes/goonj-crm/style.css` around lines 202 - 221, The mobile
82vw rule is overriding your grid sizing; add an explicit override to reset
width inside the contribution form context so grid items don't get forced to
82vw—for example, within the .crm-contribution-main-form-block scope (targeting
`#crm-main-content-wrapper` form .crm-block.crm-contribution-main-form-block
.crm-public-form-item .crm-profile and its direct .crm-section children) add a
rule that sets width: auto !important (and/or max-width: 100% !important) for
the inner divs/elements (e.g., the selector matching .crm-profile > .crm-section
div or .crm-profile .crm-section) and include that override inside your existing
`@media` (max-width: 768px) block so it neutralizes the 82vw rule on small
screens.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary by CodeRabbit