React-beautiful-dnd: Columns overlapped when start dragging in the board example

[lukyth]

Bug or feature request?

Bug

Expected behavior

When start dragging a board at https://react-beautiful-dnd.netlify.com/?path=/story/board--scrollable-columns on a small width screen, "Finn" and "Princess bubblegum" column are not overlapped.

Actual behavior

"Finn" and "Princess bubblegum" column will be overlapped when start dragging.

Steps to reproduce

1. Visit https://react-beautiful-dnd.netlify.com/?path=/story/board--scrollable-columns
2. Reduce the browser width until "Princess bubblegum" column is out of the viewport.
3. Start dragging "Jake" or "BMO" column.
4. "Finn" and "Princess bubblegum" column will be overlapped.

What version of React are you using?

16.8.5

What version of react-beautiful-dnd are you running?

10.1.0

What browser are you using?

Google Chrome Version 73.0.3683.86 (Official Build) (64-bit)

Demo

Not sure if this's related to https://github.com/atlassian/react-beautiful-dnd/issues/131 and https://github.com/atlassian/react-beautiful-dnd/issues/268 or not. But this's probably not the same issue as those two imo 😅

[driescroons]

I manually checked from what version this overlapping problem arose in the package and managed to pinpoint the update in where it started happening.

Version 10.0.4 (doesn't have problem): https://codesandbox.io/s/mjv8mpv5q8
demo: https://gfycat.com/WastefulSnivelingAmericanbittern

Version 10.1.0 (has problem): https://codesandbox.io/s/918kk3m70p
demo: https://gfycat.com/UniqueContentDuckbillcat

For now I suggest using version 10.0.4
@alexreardon hope this helps 😃

I've checked the commits in between both versions. Not a lot of functionality changes except for this one: https://github.com/atlassian/react-beautiful-dnd/commit/4518e53bdd713c1b4edd65a4f73e4f6149983769

I'll report again with an update as soon as I find it.

[alexreardon]

This is fixed in 11.0.4 #1326

[lukyth]

Thanks! 💯