-
-
Notifications
You must be signed in to change notification settings - Fork 1k
Fix horizontal scroll on mobile search filters #2273
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: main
Are you sure you want to change the base?
Conversation
|
Thank you for the updates! This is for #2266 For others to see, this is what it looks like on mobile: I think:
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: |
|
I have improved the UI and the mobile/tablet dropdown logic as you suggested. Please review the changes once. |
|
@rrrr08 Do you plan to continue working on this pull request? |



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