Fix/responsive cards 360px

[riyanshigupta890-cloud]

Summary [required]

This PR makes the project cards section fully responsive on 360px viewports (common on budget Android devices). The fix includes reduced card padding, single-column layout, tighter tag spacing, and ensures action button text remains visible without clipping. Tested on Chrome DevTools device emulation (Pixel 4a, 360x800).

Related Issue [required]

Closes #9

Type of Change [required]

• Bug fix — resolves a broken behaviour
• Feature — adds new functionality
• Data — adds new projects to data/projects.json
• Documentation — updates docs, README, or code comments only
• Style — CSS or visual changes only, no logic change
• Refactor — restructures code without changing behaviour
• Test — adds or updates tests

What Was Changed [required]

File	Change made
static/style.css	Enhanced @media (max-width: 380px) block with specific selectors for .project-card, .project-card-tags, .btn-save-project, .btn-details, and .results-grid to ensure proper responsive behavior

How to Test This PR [required]

1. Clone this branch: git checkout fix/responsive-cards-360px
2. Open the DevPath app locally: python app.py
3. Navigate to http://127.0.0.1:5000/#the-project
4. Open Chrome DevTools (F12) → Device Toolbar (Ctrl+Shift+M)
5. Set device to Pixel 4a or custom 360x800 viewport
6. Fill out the form and generate project recommendations
7. Verify at 360px:
   • ✅ No horizontal scrolling
   • ✅ Cards fit completely in viewport
   • ✅ Tags wrap cleanly to 1-2 lines
   • ✅ "Save Project" and "View Full Project" buttons fully visible with readable text
   • ✅ Card padding balanced and not cramped

Test Results [required]

This is a CSS-only change with no Python tests. Visual verification completed:

paste output here

Screenshots (if UI change)

Before (Overflow)	After (Fixed)
Tags overflow, buttons clipped, horizontal scroll	Clean wrap, full visibility, single column

Screenshots taken at 360x800 using Chrome DevTools device emulation

Self-Review Checklist [required]

• I have read CONTRIBUTING.md and followed all guidelines
• My branch name follows the convention: fix/responsive-cards-360px
• I tested the changes at 360px and 1280px viewports using Chrome DevTools
• I did not introduce any print() or console.log() debug statements
• I have not modified files outside the scope of issue Make the project cards section fully responsive at 360px #9
• All changes are CSS-only with no logic changes
• No functions added, so no docstring requirements
• Changes follow existing code style and CSS variable naming conventions

Notes for Reviewer

• This fix improves the existing @media (max-width: 380px) block with more specific selectors targeting DevPath's actual classes (.project-card, .project-tag, .btn-save-project, etc.)
• Font sizes reduced by ~7-12% to maintain readability while preventing text clipping
• Padding reduced from 28px to 20px as requested in issue Make the project cards section fully responsive at 360px #9
• All changes respect existing CSS custom properties and dark mode support
• Tested on Pixel 4a (375px), custom 360px, and desktop (1280px+) breakpoints

[vercel]

@riyanshigupta890-cloud is attempting to deploy a commit to the komalsony234-1530's projects Team on Vercel.

A member of the Team first needs to authorize it.

[komalharshita]

Thanks for working on improving the mobile responsiveness for 360px devices. The changes address an important usability issue, but I have a few blocking concerns before this can be merged.

1. This PR currently has merge conflicts that need to be resolved before it can be reviewed accurately.
2. The CSS changes target the responsive layout, but the PR only mentions testing on a 360px viewport. Please verify that the new styles do not introduce regressions on larger breakpoints (tablet and desktop) and include screenshots or testing results for multiple viewport sizes.
3. Since the changes modify shared responsive styles, please ensure that existing project cards, buttons, and spacing remain consistent across all supported screen sizes.

Once the merge conflicts are resolved and cross-device testing is confirmed, I'd be happy to review the updated version.