fix(volunteer): prevent role card link overflow on small screens

[Abdul-Raheem324]

---

name: Pull Request
about: Submit changes to the Sugar Labs website for review

📝 Description

Fixes a UI issue where long links in the Volunteer role cards overflow outside the card on narrow screens.
The link now wraps correctly within the card.

🔗 Related Issue

Fixes #675

🔄 Type of Change

• 🎨 UI/UX Update (visual changes, styling improvements)

📷 Visual Changes

Screenshots / GIFs

Before

After

🧪 Testing Performed

📱 Browser Compatibility

• Chrome (Latest)

🖥️ Responsive Design

• Desktop (1200px+)
• Tablet (768px - 1199px)
• Mobile (320px - 767px)

♿ Accessibility

• Proper heading hierarchy maintained
• ARIA labels added where needed
• Color contrast requirements met
• Keyboard navigation works correctly
• Screen reader testing performed

📋 PR Checklist

• My code follows the project's coding style guidelines
• I have tested these changes locally
• My changes generate no new warnings or console errors
• I have checked for and resolved any merge conflicts

💭 Additional Notes

Small UI fix scoped to a single file. No functional changes.

[github-actions]

🎉 All Checks Passed!

Status: ✅ Ready to merge

✅ Completed Workflows

Workflow	Status	Details
🔨 Continuous Integration	✅ Passed	Build completed successfully
📝 Code Linting	✅ Passed	All formatting and style checks passed

---

🚀 This PR is ready for review and can be safely merged to main branch!

Great work! Your code meets all quality standards. 👏

[Anexus5919]

@Abdul-Raheem324 Looks good! Add a quick screenshot of the fix if you can. It’ll help to show the fix clearly. Just a suggestion!!

[Abdul-Raheem324]

@Anexus5919, the screenshot has already been attached.
Please check under Visual Changes; I have added before-and-after screenshots