Add new class for text wrapping

[rahul-vyas-dev]

---

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

📝 Description

Added a new reusable CSS utility class that enables proper text wrapping for long text elements.
This prevents text from overflowing or collapsing on smaller screens, improving readability across devices.

🔗 Related Issue

Fixes #534

🔄 Type of Change

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

📷 Visual Changes

Screenshots / GIFs

Before

After

🧪 Testing Performed

📱 Browser Compatibility

• Chrome (Version: latest)
• Firefox (Version: latest)
• Safari (Version: )
• Edge (Version: )
• Mobile Chrome (Device: iPhone SE etc)
• Mobile Safari (Device: )

🖥️ Responsive Design

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

✅ Test Cases

1. Long text no longer overflows on small screens.
2. Text wraps correctly inside cards, sections, and content blocks.
3. No layout shifting or UI breaking after enabling the new class.

♿ Accessibility

• Proper heading hierarchy maintained
• ARIA labels unchanged and intact
• Color contrast unaffected
• Keyboard navigation works correctly
• Screen reader experience unchanged

📋 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 updated documentation if needed
• All existing tests pass successfully
• I have checked for and resolved any merge conflicts

💭 Additional Notes

This PR introduces a small but important utility class that can be reused across the project to maintain consistent text behavior on responsive layouts. Especially fixes text collapsing on Galaxy S8 and similar narrow devices.

---

📚 Reviewer Resources

• Contributing Guide: https://github.com/sugarlabs/www-v2/blob/main/docs/CONTRIBUTING.md
• Style Guide: https://github.com/sugarlabs/www-v2/blob/main/docs/dev_guide.md
• Community Chat: https://matrix.to/#/#sugarlabs-web:matrix.org

Thank you for reviewing this contribution! 🎉

[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. 👏

[rahul-vyas-dev]

Hi, could you please take a look at my PR when you get a chance @sa-fw-an