Modal, navbar fixed-top, margin-right 16px and overflow scrollbar. Bug.

[ghost]

Reactstrap 6.0.1.

When I use header navbar fixed-top navbar-expand and I open a modal and reacstrap adds margin-right: 16px to the body element the navbar fixed doesn't move to the left like all the page.

Is it really useful to add that margin-right: 16px ?

Can we agree on leave there the scrollbar? Why we need to hide it?

[TheSharpieOne]

The intent is not to hide the scrollbar, it is to prevent scrolling of the page (and allowing scrolling of the modal if the modal is too tall)
The addition of the padding is to make up for the scrollbar disappearing.
This is how bootstrap handles it, the issue should be opened there for them to create a fix upstream so reactstrap can implement it.
It's worth noting Bootstrap's documentation website does not have this issue, this is because they do not use .fixed-top, they have custom styles 😱. These custom styles (.bd-navbar) apply position: sticky which override position: fixed keeping the same result but fixing the issue you are seeing. The only problem is: position: sticky is not supported in IE and is only in more recent version of edge (and with bugs).
So the workaround (if you can go without IE) is to use position: sticky, until then an issue should be opened with bootstrap.

[ghost]

twbs/bootstrap#26489