Fix regional partner form alignment - #74472
Conversation
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 074ce06a53
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| } | ||
|
|
||
| .optionFieldGroup { | ||
| margin-left: 15px; |
There was a problem hiding this comment.
This literal must remain equal to the Bootstrap column inset used by FieldGroup; if the grid gutter changes, the ordinary fields will follow Bootstrap while these two controls remain at 15px and become misaligned again. Use the shared gutter value, or at least a named local value that documents and centralizes this dependency, rather than duplicating the current default.
AGENTS.md reference: apps/src/AGENTS.md:L39-L42
Useful? React with 👍 / 👎.
There was a problem hiding this comment.
Pull request overview
This PR fixes visual alignment in the regional partner mini contact form (part of the Rebrand project) by ensuring the “Grade Level(s)” and “Your role” controls align with the Bootstrap-based gutter used by the rest of the form fields.
Changes:
- Introduces a new
optionFieldGroupSCSS module style to apply consistent left offset and label styling for the option-style controls. - Updates the
Grade Level(s)andYour rolewrappers to useoptionFieldGroupinstead offieldGroup.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| apps/src/code-studio/pd/regional_partner_mini_contact/regionalPartnerMiniContact.module.scss | Adds optionFieldGroup styling to align option controls with the form gutter. |
| apps/src/code-studio/pd/regional_partner_mini_contact/RegionalPartnerMiniContact.jsx | Applies the new wrapper class to the Grade Level(s) and Your role sections. |
| .optionFieldGroup { | ||
| margin-left: 15px; | ||
|
|
||
| .controlLabel, label[for="grade_levels"] { | ||
| font-weight: 600; | ||
| margin-top: 0.75rem; | ||
| } | ||
|
|
||
| .roleSelect { | ||
| max-width: 13.75rem; | ||
| } | ||
| } |
Before:
After:
Summary
This is part of the Rebrand project. The Grade Level(s) and Your role controls in the regional partner contact form bypassed the Bootstrap grid wrapper used by the other form fields, which left the two groups horizontally misaligned.
This change gives both groups a shared 15px offset, matching the form grid gutter. Their labels and controls now align with the rest of the form without changing field semantics or interaction.
Testing
yarn test:unit test/unit/code-studio/pd/regional_partner_mini_contact/RegionalPartnerMiniContactTest.jsx— 6 tests pass.git diff --check./tools/hooks/pre-commit