Add responsive behavior for collection modal

[ggeisler]

#3248 and related tickets cover the main recommendations for the revamped collection modal. This ticket covers a few areas of the modal that should be adjusted when the modal is displayed in smaller viewports or windows.

These suggestions are based on the default MUI breakpoints; the most relevant are:

• xs up to 600px
• sm 600px to 960px (above that is md, lg, and xl but they aren't relevant here)

This is straightforward if we only consider the case of one window displayed in a mosaic workspace. However, we also have to consider:

• The mosaic workspace can contain more than one window side-by-side, which means it is the window width that is relevant to deciding whether to apply responsive behavior, rather than the viewport width (and windows can be different widths, so dividing the viewport width by the number of side-by-side windows won’t be foolproof)

• A window in the elastic workspace can be narrower than the viewport width

The suggestions below assume we can solve those challenges and can apply the breakpoints to either the viewport (if only one window is open in mosaic mode) or to the window (when in elastic mode or when there are side-by-side windows in mosaic mode).

Expand/collapse filter section

• [ ] Display filter section as collapsed when the viewport is below sm. At sm and above, the filter section is initially displayed in the open state.

Example: filter section - below sm width

A 480px wide window in elastic mode, filter section is closed by default:

Wrap filter input to new row

• [ ] When the filter checkboxes are present (these are only displayed when the list contains both collection and object manifest items), and the width of the window doesn’t allow both the filter input and the checkboxes to fit in a single row, display the checkboxes first, then the filter input in the row below

I believe the filter affordance wrapping will only need to happen in the xs viewport width. I’m not sure if we need to force the wrapping based on being below the sm breakpoint, or if the elements will wrap on their own when necessary. The main issue here is that when they do wrap, the checkboxes should display first, even though they normally come after the filter input when all the filters fit in the same row:

Hide modal footer

Ideally we’d like to keep the fixed modal footer as shown in the mockups of #3248. It’s a complicated modal and the fixed footer helps structure the content and provides an additional affordance for closing it. Here's an example where the window width is above sm and thus the window height is likely to be tall enough to accommodate a modal footer while still displaying a decent amount of the manifest list:

• [ ] At viewport widths below sm, however, it would be better if we could hide the modal footer, because vertical space is more likely to be restricted.

Examples of benefit of hiding the modal in windows below sm

In the examples below, window widths are 480px and 320px. At these widths, there is likely to be less vertical space to display much of the manifest list. Hiding the modal enables at least one more manifest item to be visible in the list before scrolling:

---

Hide list item thumbnails

The list item thumbnails can help the user identify desired items so we want to display them whenever possible. However, at the smallest viewport width (xs), horizontal space is limited.

• [ ] Hide the list item thumbnails at the xs viewport width only, to enable more words in the item titles to fit into each line.

Here are examples where the thumbnails are hidden at window widths of 480px and 320px:

---