fix: prevent AppShell Header and Footer from bouncing when scrollbar …

[schummar]

…is hidden/unhidden

Possible fix for #8418. As I said there, I'm not sure why left and right were animated in the first place, so I don't know what the implications are. Feedback welcome.

Maybe only changing transitionProperty while data-scroll-locked is in place could be an alternative.

[rtivital]

left and right properties are animated to allow smooth transitions when navbar/aside becomes hidden/visible, removing these values from transition would result in broken animations.

[schummar]

When I tried to reproduce this - by collapsing NavBar and Aside in alt layout - I found no left or right property that was set. It seems inset-inline-start and inset-inline-end are used to position the header then. Is there another scenario that I am not considering?

Edit: Alright, seems in this context that is kind of the same as left and right. I'll look into an alternative approach then...

[schummar]

I was able to make it work by using and animating margin-inline-start/margin-inline-end instead. That way it doesn't collide with right that react-remove-scroll sets.

While testing it, I noticed that the problem in alt layout is even worse, because there the aside element jumps as well. So I included that in the fix as well. I had to hide the aside while scroll-locked is on - otherwise part of it would be visible under the scroll bar.

Stories are updated to test the modal behavior in both layouts:

AppShell-bounce-issue-1.mp4

AppShell-bounce-issue-2.mp4

[rtivital]

Thanks!