OJS Variables example mobile issues

[declann]

Hi,

Thanks for making closeread for quarto!

On mobile I'm running into issues with the OJS variables example.

I was suspicious about headroom.js being the cause but when I remove navigation bars it's still an issue.

Screencast.from.2024-11-13.14-52-02.webm

Declan

[jimjam-slam]

Thanks for flagging this, @declann! I can reproduce it in the device simulator and on my phone. It might take me a few days to look at this properly, but usually when we see horizontal overflow issues, it's a problem with sticky elements forcing the sticky column to be wider than it ought to be. We've mostly seen it with poems; not sure at first glance why it's happening here (especially as the globe doesn't visually appear to spill)!

[declann]

I didn't see how this was linked to overflow in the x direction (because it's the y position calcs that appear to get messed the most!), but in my own usecase I fixed it by hacking width to not overflow in the x direction

Now my closeread is working on mobile 🎉 - perhaps hacking the width would fix the example too, but maybe the underlying problem can be fixed too (unsure how complicated this gets)

[jimjam-slam]

Good that you have a short-term fix — yeah, when we get size problems with stickies, the horizontal overflow is our big concern, but it can definitely mess with the vertical too!

If you're using OJS graphics, you could try using width, which is a built in OJS variable, to directly specify the width of the graphic in Observable Plot (or whatever framework you're using). You might get a touch of chop when a user resizes the window, and I don't think it should be needed (SVGs usually resize nicely up to their native maximum size), but you could experiment with it until we get time to fix it!