Fix horizontal scroll on mobile search filters

[rrrr08]

Problem
Filter tabs on the search results page require horizontal scrolling on mobile devices, creating a poor user experience.

Solution
Implement responsive design with:

Desktop (>768px): Horizontal tabs (unchanged)
Mobile (≤768px): Dropdown menu
Both UIs exist in HTML; CSS media queries control visibility.

Changes
docs/templates/docs/search_results.html: Add filter-tabs div and filter-dropdown select
djangoproject/scss/_style.scss: Add responsive styles with @media queries

Benefits
No horizontal scrolling on mobile
Touch-friendly dropdown interface
Maintains accessibility (ARIA labels, keyboard navigation)
Desktop experience unchanged

Fixes #2266

[sarahboyce]

Thank you for the updates! This is for #2266

For others to see, this is what it looks like on mobile:

I think:

• the bottom border shouldn't exist for the dropdown
• we might want some top margin/padding
• possibly, we want a filter icon 🤔

Also, we still require a horizontal scroll for tablet screen/small laptop screens

So we might want this to snap a little earlier.

A different option could be that we keep the tabs, but on mobile or tablet we have it snap into something like:
All | Option 1 | More (dropdown)
Where Option 1 would be whatever is selected or the first option (if no filter is applied)

[rrrr08]

I have improved the UI and the mobile/tablet dropdown logic as you suggested. Please review the changes once.

[sarahboyce]

I think it will help the review if you include screenshots

This is what I see:

This is closer to what I recently suggested thank you
I think the main issue here is although "API Reference" is selected, it is not clear visually that this is selected. When I made the suggestion, I expected "All" to always be available (which you have done) but also 1 other tab (in this case it would be "API Reference" and clearly selected) and then the dropdown always says "More"
I also personally don't like having the burger menu when it is a dropdown