hover trigger is offset to left

[Abenezer]

far right dock items are not interactive (maginiable ) onclick works but they wont maginfy when mouse is over. plus maginication area of far left trigger maginification even when not directly over the dock items . it seems there is some kind of offset.
here is my file
<Dock width={400} magnification={2} magnifyDirection="up" debug={true} className="dock" backgroundClassName="dock-background"> {["a", "b", "c", "d", "e"].map((item, index) => ( <Dock.Item className="dock.item" key={index} onClick={() => console.log(item)}> <img src={${item}.png} /> </Dock.Item> ))} </Dock>

it works as expected if i set the width to 800 but its too big for me

[Abenezer]

after turning on the debug i can see there is an offset.... and to correct it, the width should be proportional to the content of the dock (total width of number of elements) . am not sure this is the intended behavior but in my case i have to increase the width if i add extra elements. kind of difficult for dynamic content (i am pulling dock elements from server)

[Abenezer]

i resolve it by adding display: flex; on immediate parent element .. i think you should included it in the docs or you can just close this issues if it's that obvious