Reduce News Section Header Height to Improve Content Visibility

[sachinacharyaa]

---

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

📝 Description

This PR improves the News section first impression by reducing the height of the animated header.

Previously, the large title and description occupied most of the viewport, making it appear as if there were no news items available on initial load.

The updated design keeps the existing animations and visual identity while making the search input, categories, and news content visible without scrolling, improving usability and content discoverability.

🔗 Related Issue

Fixes #611

🔄 Type of Change

• [✅] 🎨 UI/UX Update (visual changes, styling improvements)
• [✅] 📖 Content Update (text changes, documentation)
• [✅] ⚡ Performance Improvement
• [✅] ♿ Accessibility Enhancement

📷 Visual Changes

Screenshots / GIFs

Before: Large header hides news content
After: Compact header with visible news list and filters

🧪 Testing Performed

📱 Browser Compatibility

• [✅] Chrome (Version: All)
• [✅] Firefox (Version: All)
• [✅] Safari (Version: All)
• [✅] Edge (Version: All )
• [✅] Mobile Chrome (Device: All)
• [✅] Mobile Safari (Device: All)

🖥️ Responsive Design

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

✅ Test Cases

1. News content is visible on initial page load
2. Search input and categories are accessible without scrolling
3. Animations and layout behave correctly across screen sizes

♿ Accessibility

• [✅ ] Proper heading hierarchy maintained
• [✅ ] Color contrast requirements met
• [✅ ] Keyboard navigation works correctly

📋 PR Checklist

• [✅ ] My code follows the project's coding style guidelines
• [✅] I have tested these changes locally
• [✅] I have updated the documentation accordingly
• [✅] My changes generate no new warnings or console errors
• [✅] All existing tests pass successfully
• [✅] I have checked for and resolved any merge conflicts
• [✅] I have optimized images/assets (if applicable)
• [✅] I have validated all links are working correctly

💭 Additional Notes

I’m contributing to this project because I admire Sugar Labs’ work in empowering students through open source and I’m happy to help improve the website where possible.

📚 Reviewer Resources

• Contributing Guide
• Style Guide
• Community Chat

Thank you for contributing to the Sugar Labs website! 🎉

[github-actions]

❌ Checks Failed

Status: 🚫 Not ready to merge

Please fix the following issues before merging:

📝 Code Linting Failed

Issue: Code formatting or style violations detected.

Specific problems:

• Code formatting issues detected

How to fix:

Platform	Command	Description
🐧 Unix/macOS/Linux	npm run format	Auto-fix all formatting issues
🪟 Windows	npm run format:file <filename>	Fix specific files
🔍 Check Only	npm run format:check	Check formatting without fixing

Need help with linting? Check out the Linting Guide for Windows Users for detailed instructions.

---

🛠️ Next Steps

1. Fix the issues mentioned above
2. Test locally to ensure everything works
3. Push your fixes to this branch
4. Wait for re-check - This bot will automatically run again

🤖 This comment will be updated automatically when you push new commits

[sachinacharyaa]

Previously, there was an experimental toggle change that was not merged. I have reverted that and updated the implementation based on the original design.

There is nothing to worry about

This PR only includes the intended and reviewed improvements of News section.

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

[FirePheonix]

share images/screen recordings of your change please. I'll highly appreciate that..

[sachinacharyaa]

share images/screen recordings of your change please. I'll highly appreciate that..

Thank you for info !

I already included in issue section with before and after. You can see by visiting (Fixes #611)

[FirePheonix]

@sachinacharyaa thank you for your contribution, but I don't think this change is really required.
we like the current News page as of now.. the reduced "News" keyword in your PR would lead to inconsistent design with other pages.
Many pages have some keyword on their top, mentioning exactly as they are.. and the current size of News keyword is consistent with that..