Issue with position of inbox

[RuslanHryn]

The issue with the position of the inbox has appeared after upgrading magicbell-react from 10.11 to 11.1.
Position with default settings:

With reduced window size

styles:

When setting any placement in FloatingNotificationInbox

as you can see it fixed the position of the inbox but the arrow is still in the incorrect position

Here are styles:

The issue is reproducible on the latest Chrome and Safari

[smeijer]

Hi Ruslan,

I can't debug your positioning issues using the screenshots you provided, but please check the placement property, and try making one of the parents relative if the absolute positioned floating inbox seems to be positioned incorrectly.

I've pushed an update that fixes the arrow positioning. It should be better now. I've also added the offset and arrowPadding props to the FloatingNotificationInbox component, which makes it easier to adjust the inbox's position relative to its trigger. I hope that helps. You can use those props like:

<FloatingNotificationInbox 
  height={450} 
  {...props} 
  placement="bottom-start" 
  offset={24} 
  arrowPadding={16} 
  isOpen
 />

[RuslanHryn]

@smeijer thanks a lot! It fixed this issue