Misalignment when viewport has not enough space to render ToolBox

[sohamimpacter]

I added the side with bottom alignment. It works well on large screens, but on smaller laptop screens, where the entire UI is not visible, the toolbox moves upward and cannot be scrolled into view.

[enszrlu]

@sohamimpacter this is caused by nextstepjs calculating if there is enough space at bottom on the screen, then it resolves no enough space and swaps to other option. We need to improve it by checking actually if there is space on swapped side or not.

Looking at the visuals, I think highlighted area is too big, not much space for pointer.

[sohamimpacter]

@enszrlu During implementation, it became clear that this approach does not work reliably with the MUI DataGrid. Because the table’s height and width vary across screen sizes, I’m running into the same issues mentioned earlier.

As an alternative, I’m considering making the popup behave more like a component within the page, rather than a full-screen overlay as it is now. The idea is:

The page remains rendered and scrollable as before

A highlight/spotlight box appears on top of the content

The spotlight lives inside the main component, not outside the wrapper

This would be similar to how ReactTour works.

Currently, scrolling is possible only inside the highlighted/spotlight container. To prevent that, I used disableInteractive, but that also disables clicking on elements inside the spotlight.

In the future, would it be possible to:

Disable scrolling without disabling click interactions, and

Control scroll and click behavior independently?