The 2026 Drupal Business Survey is open. Your response will help shape the future of the Drupal business ecosystem.Problem/Motivation
The List view on mobile is almost the same as the Grid view. Recommendation is to default the displsy on mobile (small size viewports) to the Grid view and to not have a List view option. Hide the Grid and List buttons
Steps to reproduce
1. After installing and enabling the project_browser module
2. Visit the /admin/module/browse page
3. View the page in a small viewport or perform these steps on a mobile device
Proposed resolution
Remove the option to choose between List view and Grid view on small viewports. Instead default the display to Grid view.
Remaining tasks
- ✅ File an issue about this project
- ☐ Manual Testing
- ☐ Code Review
- ☐ Accessibility Review
- ☐ Automated tests needed/written?
| Comment | File | Size | Author |
|---|---|---|---|
| gridview-mobile.png | 75.28 KB | leslieg | |
| listview-mobile.png | 45.42 KB | leslieg |
Issue fork project_browser-3285870
Show commands
Start within a Git clone of the project using the version control instructions.
Or, if you do not have SSH keys set up on git.drupalcode.org:
changes
Comments
Comment #2
leslieg commentedComment #3
leslieg commentedComment #4
leslieg commentedComment #5
bnjmnmIt may be worth either postponing this on #3284325: Consider merging Project & ProjectLIstView into one component or adding this to that issue's scope. If that lands, List and Project will be the same template that is already conditionally displayed so I imagine it wouldn't be too difficult to leverage
<MediaQuery>to add an additional condition that determines if a project is shown as a card.Comment #6
leslieg commentedComment #8
srishtiiee commented@bnjmnm I think this issue can be addressed separately, even without landing #3284325: Consider merging Project & ProjectLIstView into one component as the toggle buttons are a part of
ProjectBrowser.svelteand aren't affected byProject.svelteandProjectListView.svelte. Opening an MR for the same.Comment #10
srishtiiee commentedComment #11
bnjmnmThe proposed solution was
The current MR addresses the "Remove the option to choose between List view and Grid view on small viewports". It does not address the "Instead default the display to Grid view [when on mobile].", which also happens to be the part I believe would be much easier when #3284325: Consider merging Project & ProjectLIstView into one component lands.
Comment #12
leslieg commentedI'm thinking work can proceed on this issue now that #3284325: Consider merging Project & ProjectLIstView into one component has been completed.
Comment #13
narendrarAll good, except that test can be modified to prove that buttons are not available before window is resized.
Comment #14
bnjmnmThis isn't switching to grid on narrower viewports, just hiding the toggle. Provided info in the MR on how to get this taken care of without having to change much beyond what is already in place.
Comment #15
bnjmnmTo confirm it properly switches to grid on narrow viewports, you can use inspector to look at any list item with the
.projectclass. If you switch to list view on a wider viewport, that list item will have the.listclass. Narrow the viewport and that class will become.gridwhen it's narrow enough to hide the view toggle. Similarly, it will switch back to.listonce wide enough and the toggle is again visible.Comment #16
narendrarTested manually and found that now on narrow viewports buttons are removed and when window is resized last option is selected. Marking as RTBC.
Comment #19
tim.plunkettThanks, merged!