Improve spacing around logo and attribution elements

[LisaBosCesium]

Credits (logos) and the attribution/attribution link that appear in the lower left of the screen are a bit crowded and visually misaligned. Please adjust this to look cleaner.

For example:

[LisaBosCesium]

Note the layout looks a little different but also not great in Cesium Stories.

[ggetz]

@jjspace Would you be able to fit this in sometime this month?

[jjspace]

Just posting some thoughts I shared offline. One of the core issues here is that Google's logo (and potentially any other logo any attribution has) has a set defined height that may or may not nicely line up with the ion logo image and by extension, any text in that same block (like the "data attribution" link). We can add specific changes for google specifically (may need a change on ion's side) but the problem is universal for every image added and it's hard to align things.

(stretching height is not actually as easy as it sounds given how CSS treats width and height, hard to "stretch to biggest", easier but slightly restricting to "set all to same height")

I would like to come up with a universal solution the "just works" for any logo but I think that may end up being too hard. I think it would be a lot easier to come up with guidelines to either (1) modify logo attribution images to be a set height and/or (2) define how image attributions are rendered and require changes to the logo/html on ion's side to always have them render predictably.

Something like adding vertical alignment to the attribution's html styling can achieve fairly nice results in the existing element's architecture: I found vertical-align: -5px works best for Google's logo specifically @angrycat9000

If ion made that change right now it would look like this. Notice Google is aligned with Data Attribution. The ion alignment would come with the next release if we go this approach

@ggetz @LisaBosCesium I set up some time to quickly chat about this tomorrow.

[angrycat9000]

The attributions do typically come from the data set in the asset in the ion UI. However Google is hard coded because we wanted it to show as non-collapsible (ie show on screen). See https://github.com/CesiumGS/cesium-ion/issues/6537 . That is why there is no attribution set on the Google asset in ion UI.

[angrycat9000]

@jjspace @LisaBosCesium was there any discussion of the horizontal spacing? The Google logo is right next to the ion logo and could benefit from some space in between (this would apply to any attribution). Looks like the Data attribution link has 5px of space hard coded into it on the left

[jjspace]

@angrycat9000 yes, horizontal spacing was also addressed in #12047 and will be included in the next release. This was something we could do on CesiumJS's side, the vertical alignment we could not.