Skip to content

contribution page ui #1664

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
tarunnjoshi wants to merge 1 commit into
base: dev
Choose a base branch
from
Open

contribution page ui #1664

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 28 additions & 0 deletions wp-content/themes/goonj-crm/assets/styles/goonj-main.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -257,6 +257,34 @@
margin-left: 22px !important;
}

// 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;
}
Comment on lines +283 to +285

@coderabbitai coderabbitai Bot May 7, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

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 +260 to +286

@coderabbitai coderabbitai Bot May 7, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major | ⚡ Quick win

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.


#crm-container #crm-main-content-wrapper form .messages.crm-error ul {
display: none !important;
}
Expand Down
21 changes: 21 additions & 0 deletions wp-content/themes/goonj-crm/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -199,6 +199,27 @@ Tags: non-profit, crm, coloredcow
margin-left: 22px !important;
}

#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;
}
}
Comment on lines +202 to +221

@coderabbitai coderabbitai Bot May 7, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major | ⚡ Quick win

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.


#crm-container #crm-main-content-wrapper form .messages.crm-error ul {
display: none !important;
}
Expand Down