Add CSS to support scrolling in layers toolbar in the Cesium map view

[ianguerin]

• Set a fixed height for body element to force map view to appear on page.
• Add some padding to allow for scrollbar in layers toolbar.
• Fix issue with cutting off last layer in toolbar on narrow laptop screen due to a hardcoded value for the header height.

GitHub issue: #2242

[mbjones]

Thanks @ianguerin this is great. Could you provide a screenshot in the PR so folks that don't have a dev-instance of MetacatUI set up can see what the feature will look like?

@robyngit could you review please and maybe this can be included in the release along with the hierarchical data view? Thanks.

[ianguerin]

Here are some before an after screenshots:
Before the layers list was scrollable:

After, with the layers list scrollable

Before, when scrolled to the bottom:

After, when scrolled to the bottom

[robyngit]

Great work, @ianguerin! Thank you for being so proactive on this and congrats on your first MetacatUI PR 🎉! Your changes look perfect for the PDG portal in the arctic theme. I appreciate that you added only the most minimal CSS rules to make this work; it helps keep our already very large CSS file from getting even larger!

Because MetacatUI is used by other projects, it's important for us to check that changes align well across various themes and contexts before merging them into the main codebase. I've outlined some of these considerations below.

In non-arctic themes

When testing in non-arctic themes, like knb, there seems to be a slight issue: the cesium map expands to accommodate this list, instead of having the list scroll as intended.

To switch to another theme, change theme: "arctic" to theme: "knb" in the config.js file.

In non-portal contexts

Repositories may also use the cesium map, instead of Google maps, in the main data search catalog. In this context, there's a bit of a display problem. The overflow: hidden CSS rule added to the .map-view__toolbar-container class is causing the right side of the layer list to be clipped off.

To see this, pull in the drp theme from the metacatui-themes repo, and configure the theme option to drp. The search catalog with layer list expanded looks like this:

---

We can collaborate on fixing this issue given that other themes and contexts may be outside the scope of your PDG work. In any case, thank you again for this and I look forward to more of your contributions!

[ianguerin]

Thanks for the detailed review, Robyn. I've updated the PR with changes to address the issues you found with the toolbar. It looks like the issue with the drp theme was probably broken without any scroll capability (you couldn't actually access the layers in the list below the visible content), so this change should help.

[robyngit]

Nice work @ianguerin!!