Electricitymap-contrib: Exchange arrows don't move when resizing the map horizontally

[q--]

Resize the browser window horizontally. The map behaves correctly, but the arrows don't move. (They don't jump to the right spot after you're done resizing either.)

Resizing vertically works fine.

Occurs on both Chrome and Firefox, so it probably happens for all browsers.

[Kongkille]

Hi :) I just tried myself and I can't seem to replicate this. I see that it seems they do not move to the right spot while resizing the window, however when I am done resizing it seems to work. Can you perhaps attach a .gif or a video?

I've tested on Chrome & Safari.

[q--]

[Kongkille]

Ah I see. I resized it using the bottom right corner and only dragged horizontally, my bad. Thanks for finding this :)

[fbarl]

Good catch @q--!

It seems that the source of this issue is that react-map-gl onViewportChange hook gets called when the map viewport height gets updated, but _not when the width does_. I'm tempted to report an issue on their repo as I didn't find anything similar online, but before I do I'd like to make sure it's not something caused by our CSS :thinking:

In any case, their is a simple workaround if we want to move fast - we can simply insert our own separate width listener in layout/map.js - I tried this piece of code and it fixed the issue:

const width = useWidthObserver(ref);

useEffect(() => {
  handleViewportChange({ ...viewport, width });
}, [width]);

[fbarl]

I opened visgl/react-map-gl#1157 to try to address the issue in the library, but in the meantime I addressed it via the above suggested hack in #2589.