Mosaic 2x2 banners

[moontrip]

This will resolve https://github.com/VEuPathDB/web-eda/issues/1383 and https://github.com/VEuPathDB/web-eda/issues/1574. Screenshots are attached in the following:

a) showing top and stats table banners at once (unfolded)

b) showing top banner content after folded

c) showing stats table banner content after folded: no facet variable

d) a case with a facet variable (unfolded)

[asizemore]

I originally thought we should keep it the same, but that screenshot above changed my mind :) When we facet, that line underneath the tabs with Statistics widens, and also we can see that the banner above matches the width of that area of the page. For those reasons in addition to what @jernestmyers said, I'd vote to let the banner expand to fill that space.

[moontrip]

Thank you for your suggestions concerning the width of stats' table banner for the case of facet variable, @jernestmyers @asizemore Actually I was gauging whether it should be full width or not so your suggestion convinced me of making a decision. I will update it 👍

[moontrip]

Also, I think we should open a follow-up ticket in CoreUI to change the cursor of the collapsibleIcon to be pointer, which would better indicate that it's a clickable button.

Here's the relevant code in the Banner component.

Definitely I like the idea @jernestmyers: I was thinking the case before but didn't have time to do that. Perhaps you can easily handle it at a follow-up ticket in the near future 😄

[jernestmyers]

Definitely I like the idea @jernestmyers: I was thinking the case before but didn't have time to do that. Perhaps you can easily handle it at a follow-up ticket in the near future 😄

Yes, I'll open the issue now and try to get to it soon!

[moontrip]

@jernestmyers @asizemore As suggested, I made a full width of stats table banner when a facet variable exists. Here is a screenshot: