Need prettier CSS for mission screens outside of English language

[misaugstad]

Brief description of problem/feature

The CSS looks a little bit rough in languages that are more verbose than English for our new mission start screens. And they are so pretty, I want them to be pretty in other languages! There are two examples below, but it's consistent across Spanish, Dutch, and German, and for all the different label types on both Validate and Explore.

[jonfroehlich]

Yes, agree. And nice diligent eye on this one!

I just mentioned this here: #3259 (comment)

It should be pretty straightforward. Maybe check string length and dynamically change CSS to better center content text.

[hoominchu]

Just saw this issue. I am not sure what approach is being explored currently but we can have a function that adjusts the font size to fit it on the label by checking if the 'container' element has a scroll (horizontal and vertical) and if yes, reduce the font size by 0.05px (or some other small value). Repeat until there is no scroll or we hit a minimum font value.

I can help provide more details if needed.

[jonfroehlich]

I don't think we should change the font size necessarily. To me, it's purely about spacing. See the screenshots above.

[hoominchu]

Ah okay. We can add a 'locale' class to the mission screens div (maybe we do this already) and then have CSS with more specific selectors to handle those cases.