Adjust scrolly slide width and overlapping issue for short screens

[AditiBhandariTR]

Scrolly slides scale by screen-width so on shallow screens (e.g. Dell monitors) they overlap with the body text (pic attached) and once their position is fixed the top and bottom of the slides are cut off. @man-shar figured out a fix here: https://github.com/tr/graphics_2022-winter-paralympics-equipment/blob/master/src/lib/Scroller/Background.svelte#L9-L49

[hobbes7878]

Here's a demo of the behaviour: https://graphics.thomsonreuters.com/testfiles/2022/ISRyTEP55cYk/

Shorten that to more landscape-y viewport and you'll see what Aditi's talking about.

Gonna tag in @fcage and @MinamiFunakoshiTR, too. This may be a deeper issue with how we we're using background images in the ai2svelte components, too.

[fcage]

This is specific to that scroll component. There should be parameters that determine the screen ratio and then reset the appropriate width to display. This is unrelated generally to the ai2svelte component

[hobbes7878]

Thanks, fielding.

Here's some stabs I took toward a fix:

Notice that the individual background steps are relative inside the background container. Adding a top: 0; to the steps seems to stop the graphic from flowing over the text:

without:

with:

That still doesn't address super letterbox displays, though, where we'd have to potentially scale the width down from what's available.

I think that'll need some idea of the height as a ratio of width for the underlying image to scale down. Could probably use svelte's own client height bindings to do that. But, trick I suppose is that ratio changes depending which width we're displaying.

Manas' trick is neat, but it can lead to some really small display type, since it scales the text down as well:

I wonder if we could encode height as we're exporting the artboards, since we have that info at that point. If we did, then we could calculate the best fit ratio from that based on width and height of the container and display that.