Fix: Improve responsive layout for filter-controls on Challenges page

[KaranKumar099]

Fixes: #349
This PR improves the responsiveness of the filter-controls section on the Challenges page.

Steps to Reproduce (before fix):

1. Navigate to Challenges from the navbar.
2. Resize the window below 1020px.
3. Observe the layout break in the filter section.

Fixed Screenshot:

[greptile-apps]

Greptile Summary

This PR addresses a responsive design issue on the Challenges page where the filter controls section would break when screen width dropped below 1020px. The fix involves two key changes:

1. HTML cleanup: Removes an empty and redundant <div class="filter-group"> element from pages/challenges.html that was contributing to unexpected spacing or layout behavior in the flexbox container.

2. CSS responsive enhancement: Adds a new media query at the 1020px breakpoint in styles/challenges.css that makes the .search-group element take full width (width: 100%). This prevents the search group from getting squeezed or overflowing on medium-sized screens (tablets/smaller laptops).

The changes integrate well with the existing responsive design patterns in the codebase. The application already has a mobile breakpoint at 768px where similar full-width styling is applied. This new 1020px breakpoint fills the gap between desktop and mobile layouts, creating a smoother responsive transition for tablet-sized devices. The fix specifically targets the search input and clear filters button alignment issue that occurs when the right-aligned search group (margin-left: auto) doesn't have sufficient horizontal space.

Confidence score: 4/5

• This PR is safe to merge with minimal risk of breaking existing functionality.
• The changes are targeted, well-scoped, and follow existing responsive design patterns in the codebase.
• The HTML cleanup removes redundant code, and the CSS media query addresses a specific layout issue without affecting other breakpoints.

_{2 files reviewed, 1 comment}

_{Edit Code Review Bot Settings | Greptile}

[greptile-apps]

syntax: Missing space after selector name

Suggested change

	.search-group{
	.search-group {