Fix vertical alignment of form labels on mobile screens

[siddhantsinghbussiness-afk]

On screen widths below 480px, the form labels in the recommendation form sit
too close to the input field below them. There is not enough visual separation
between the label text and the input border, making the form feel cramped.

Expected Outcome:
On all mobile screen sizes (tested at 375px and 414px), each label has at
least 8px of space below it before the input begins. The change should only
affect the mobile breakpoint and leave desktop spacing unchanged.

Files to look at:

• static/style.css — search for the @media (max-width: 640px) block
• templates/index.html — the .form-group elements

[github-actions]

Thank you for opening your first issue in DevPath.

Please make sure to:

• Read CONTRIBUTING.md
• Wait for assignment before starting work
• Follow repository guidelines carefully

Happy contributing.

[siddhantsinghbussiness-afk]

Hi @komalharshita

I analyzed the issue and identified the probable cause.
I would like to work on implementing the fix and testing it properly.

Please assign this issue to me.

[vansh2604-star]

Hi @komalharshita , I’d like to work on this issue under GSSoC 2026.

I reviewed the issue details and understand that the fix involves updating the mobile breakpoint styling to add proper spacing (minimum 8px) between form labels and inputs without affecting desktop layouts.

Please assign this issue to me. Thank you!