OPAC has poor spacing on small screens

[Benjamin Kalish]

When viewing the public catalog on many mobile devices (or even smaller computer screens) the search form, menus, and filters take up so much space that a user can't see their search results without scrolling down. It is very easy to think that the search has not been completed. This search form also appears above the pages for individual TCNs, basket pages, and all the "My Account" pages, again hiding the desired content beneath the fold.

There are many ways the OPAC could be improved for small screens, but this one is a priority as folks often do not realize new content has been loaded.

We are seeing this for the first time in CW MARS after updating to Evergreen 3.7.

[Benjamin Kalish (bkalish)]

I don't know Bootstrap, but it looks like the spacing issues are largely controlled by special Bootstrap class attributes like the m-5 applied to the div in the search form. The class m-5 says "add a five unit space on all screen sizes". Bootstrap also provides classes to allow for breakpoints, so that the spacing can be different on different screen sizes. (A class such as m-md-5 would only apply this spacing on devices that are medium ("md") or bigger.) I can imagine that the fix may be simple as picking appropriate classes from this vocabulary to take into account usability on a variety of screen sizes.

https://getbootstrap.com/docs/4.0/utilities/spacing/

[Jeff Davis (jdavis-sitka)]

In addition to adjusting the spacing on the main search form, I wonder if all those additional filters (sort results, show more details, disable highlighting, limit to available, etc.) should be tucked into a collapsible "Filters" area and hidden by default.