Make responsive adjustments to search input and field select

[ggeisler]

Broken out of #1110.

At all viewport widths, the search field filter select menu is not wide enough to display the entire labels of various menu options, including the default option. Below are a couple of examples, but if you select the "Creator / Contributor" option you can see problems at any viewport width.

xs (below 576px)

md

Recommendation

I see similar problems with Spotlight (at least, Stanford Exhibits) so addressing this issue might be worth doing in Spotlight. The DLME case is a bit extreme, because one of our filter options is fairly long ("Creator / Contributor"), but some Stanford Exhibits have a roughly similar long option ("Author/Contributor") so I'm not sure we should treat it as a one-off DLME outlier.

Below I'll provide general recommendations for dealing with this at each breakpoint. The elements involved (the search input box and the associated search filter select) are arranged using flex and I found a couple of potential ways to adjust things but the developer who works on this might have better ideas for accomplishing the goal so I don't want to be too specific in my suggested fixes.

lg viewport

At lg viewport width, the custom select isn’t wide enough to display the longest label:

The most straightforward possibility here is to increase the width of the filter select to ensure the "Creator / Contributor" option is completely visible, taking away the added width from the search input box (I think it's acceptable for the input to be a bit narrower at this viewport width).

We could apply this adjustment to a media query that is lg and above, to handle the xl viewport where the issue also exists. Alternatively, since the xl viewport has more available space between the main menu and the search elements, we could at xl and wider just widen the filter select and leave the width of the search input as is.

md viewport

At md viewport width, not only is there not space for a longer select box label, there isn’t sufficient space for the brandbar elements, resulting is undesirable alignment and line-breaking:

The most straightforward fix here is to update the media query that currently adjusts the header elements for mobile at sm and narrower to apply those mobile header adjustments to md and narrower instead. We are already applying other mobile adjustments at md (e.g., shifting the sidebar to the top of the main content area and using full-width for each section rather than 3/9 side-by-side columns), so this shouldn't be visually confusing.

sm viewport

Here we have the full width of the viewport available for the search elements, but a long option like "Creator / Contributor" is not fully visible in the menu:

Two options:

• Remove the spaces around the slash in "Creator / Contributor". This is enough for the option label to be just completely visible and we'd have nothing else to do for this breakpoint. This solution, however, won't suffice for any other exhibit that has an option label longer than "Creator/Contributor".
• Use the same approach as suggested above for the lg viewport: increase the width of the filter select to ensure the "Creator / Contributor" option is completely visible, taking away the added width from the search input box:

xs viewport

Below sm the search elements are very crowded and not even the default option label completely fits:

I think the solution here is to give the search filter 100% width, putting it on its own row above the search input:

Note that this appears to be what Blacklight does (not sure if that is related to the recent BS5 upgrade or not, but for whatever reason, Spotlight doesn't seem to inherit this behavior):

At xs then, we should basically do what Blacklight does, although I would suggest there be about 0.5rem vertical spacing between the two elements, as in my DLME example above.

[mwerla]

@ggeisler I think that these all are very good design solutions. For sm resolution, I would go for "increase the width of the filter select to ensure the "Creator / Contributor" option is completely visible, taking away the added width from the search input box".

[marlo-longley]

I investigated this issue during the DLME Workcycle ending 3/4/2022. Here are my notes as I was unable to push fixes this round:

This issue is likely best solved in the Blacklight repo, in the SearchBar view component. Currently DLME uses BL 7, which uses Bootstrap4. BL 8 uses Bootstrap5.

• In BL7/BS4, wrapping the #search_field select box in input-group-prepend largely solves the issue by causing the box to expand to fit the longest text string in any of its options. This can be edited in the BL file at app/components/blacklight/search_bar_component.html.erb and results look like this: @ggeisler let me know that he is not too concered about overly long text strings, as the longest option currently in DLME is "Creator / Contributor"

• In BL8/BS5, the class input-group-prepend (and also append which is used in the template) are deprecated in favor of input-group-text so the approach needs to be different. As of today, there also seems to be a difference in BL 8, where this SearchBar component is not rendering exactly the same as in BL 7 (differences in mobile view, and the search button icon).

[jcoyne]

This is blocked by a release of Spotlight that supports Blacklight 8 and possibly a release of Spotlight that supports Bootstrap 5.