[Issue 567] resolve merge conflict & correcting sass issues

[itspaigenli]

Project Flow

This PR is part of a larger progression of application form work that began in PR #538, continued through Issue #567, and was then carried forward in PR #869. This current work builds on that sequence by focusing on branch stabilization, Sass/CSS cleanup, merge-conflict resolution, and scoped form styling fixes.

Summary

This PR continues work for Issue #567, with a primary focus on resolving merge conflicts, correcting Sass/CSS issues introduced during conflict resolution, and addressing scoped styling problems affecting the application form.

What I Worked On

• Merged mvp into mvp-issue-567 to avoid risking breakage in mvp
• Resolved merge conflicts and reviewed the results of the auto-merge
• Identified that auto-merge had included non-conflicting incoming code that introduced new issues
• Corrected a delete error where CSS file contents were accidentally replaced with SCSS contents
• Identified that forms.css is a compiled file from forms.scss and should not be edited directly
• Identified and fixed SCSS syntax that had been used inside a CSS file
• Installed Sass and set up a watch command for compiling changes:

sass --watch static/sass/forms.scss:static/css/forms.css

• Identified nested syntax in the CSS file that should only exist in SCSS
• Used VS Code SCSS tooling to help catch and correct syntax issues
• Investigated disappearing .application-form > fieldset borders on smaller breakpoints
• Removed the mobile rule causing the fieldset border to disappear, with a recommendation to revisit padding for small screens
• Reviewed radio group markup and identified structural inconsistency in the disabled-status group due to an extra “learn more” element
• Added an id to the disabled-status-yes label as a temporary targeting fix
• Standardized default margins across form inputs and refined spacing for more consistent vertical rhythm
• Removed form border and reduced padding at smaller breakpoints to improve usable space on mobile
• Identified a separate structural issue in the household form that should be tracked outside the scope of this PR

Context

This branch required cleanup after merge-conflict resolution introduced additional styling and compilation issues. In particular, CSS and SCSS content became mixed, compiled files were handled incorrectly, and some responsive styling changes created new layout problems.

This PR focuses on correcting those issues and stabilizing the current form implementation without expanding scope into later application steps.

Before / After

Before

Screen.Recording.2026-04-12.at.12.15.40.mp4

• disappearing fieldset border on smaller screens
• inconsistent spacing between form inputs
• problematic radio group alignment/targeting

After

Screen.Recording.2026-04-12.at.12.09.19.mp4

• restored fieldset behavior on smaller screens
• more consistent spacing between input types
• improved mobile spacing and layout

Testing Instructions

1. Check out this branch locally.
2. Navigate to the application form page (http://127.0.0.1:5000/app-form).
3. Verify that form styles compile correctly and no SCSS syntax appears in compiled CSS.
4. Check small-screen/mobile behavior, especially:

• .application-form > fieldset border behavior
• form padding at small breakpoints
• .application-page padding
• spacing consistency across text inputs, radios, and other fields

6. Review the disabled-status radio group and confirm the temporary targeting fix behaves as expected.
7. Confirm that changes do not unintentionally improve or break the household form, since that form is structurally different and outside this PR’s scope.
8. Review non-application pages for possible shared-style regressions at very small breakpoints.

Known Limitations / Follow-Up Work

• The disabled-status-yes label id is a temporary fix and may break if markup changes again due to being targeted by "nth child"
• The household form has a different HTML structure and is not fully addressed in this PR
• Additional scoping/styling cleanup may still be needed to avoid affecting shared styles
• Remaining multi-step application work beyond the current implemented steps is still out of scope here

Team Contributions

Individual Contribution

• Paige: handled merge conflict resolution, Sass/CSS debugging and cleanup, mobile styling fixes, spacing cleanup, and investigation of remaining structural/styling issues

• Redu and Siyi: Pair Programming and PR review

What I Learned

• How this project separates Sass source files from compiled CSS output
• Why compiled files like forms.css should not be edited directly
• The importance of templating design before implementation
• Frequent merges to avoid large areas of merge conflicts
• How small markup inconsistencies can make form styling much harder to target consistently
• How responsive styling changes at small breakpoints can create unintended regressions

Challenges

• Resolving merge conflicts without breaking mvp
• Recovering from accidental file-content replacement during conflict cleanup
• Untangling SCSS syntax from CSS output
• Fixing mobile layout issues without expanding the PR’s scope too far
• Working around inconsistent radio-group markup with only a temporary safe fix

Breakthroughs

• Identified the root cause of the CSS/SCSS syntax issue
• Re-established a working Sass compilation workflow for the form styles
• Found the mobile media-query rule causing the fieldset border to disappear
• Improved spacing consistency across form elements
• Scoped the household-form problem as a separate follow-up instead of introducing risky regressions here

Resources Used

• GOV.UK Service Manual: Form structure
• Sass documentation
• MDN CSS Syntax Guide
• freeCodeCamp Beginner’s Guide to Sass

AI Tools Used

Tools

• ChatGPT / Codex

What I Used Them For

• Organizing implementation notes
• Reviewing likely syntax issues and regressions
• Drafting and revising PR description language

What I Learned or Changed From AI Output

• Refined general guidance manually to accurately reflect the scope of my contribution
• Corrected over-broad feature framing so the PR better represents merge-conflict cleanup, Sass/CSS debugging, and scoped styling fixes

Additional Notes

This PR captures the majority of the work for Issue #567, but it does not complete the full 7-step application form. Remaining steps, broader conditional logic, and additional styling/scoping cleanup should be handled in follow-up work.

[rdavison23]

@itspaigenli This is great cleanup work.
The mobile fixes, spacing improvements, and Sass corrections make a big difference.
Thanks for taking the time to document everything so clearly.

[sylviajsy]

I divided into your changes on my computer. It’s such solid engineering work, and the mobile form looks so much cleaner now.

[naomiquinones]

The previous PR targeted the mvp branch so this PR should also target mvp unless there was a reason to target the develop branch

[daaimah123]

Use language from the https://techtonica.org/software-engineering-program/ page

[daaimah123]

This should not show as an update added to the branch, unless the mvp branch is behind, please ensure develop branch latest is merged into your feature branch that should be merged into mvp

[daaimah123]

Please make sure all sass files have the scss extension.

[daaimah123]

Please make sure all sass files have the scss extension.

[daaimah123]

There should be no map files in the sass folder

[daaimah123]

I've changed your base branch to mvp.

Please take another look at your sass files and ensure the compiling process was done properly. When you run the command your map and css files should automatically adjust and update and not adjust anything in the sass folder. Its critical to make sure this is done properly as the compiling can sometimes update the css rules to read differently from sass file rules for browser convenience.

[daaimah123]

Please make sure all sass files have the scss extension.

[daaimah123]

There should be no map files in the sass folder.

[daaimah123]

Hey @itspaigenli doing my round of check-ins for the repo, will you be able to update this PR with latest from mvp branch and address the requests for changes?

[itspaigenli]

Hey @itspaigenli doing my round of check-ins for the repo, will you be able to update this PR with latest from mvp branch and address the requests for changes?

@daaimah123 I am still interested in working on this! It's "in the pipeline" of things to do.