fix: prevent horizontal scrollbar from flickering during swipe

[olejorgenb]

A minor issue, but when reviewing sentences the TinderCard animation will make the horizontal (and sometimes the vertical scrollbar) appear. This is quite jarring to me.

The TinderCard library recommend using overflow: hidden outright, but we need to allow vertical scrolling. I couldn't find a relatively simple solution for the vertical scrollbar.

But testing most pages I could not find any which need horizontal scrolling - so using overflow-x: hidden should be ok atm. Though it feels a bit dirty to apply the rule to all pages - but making it only apply to the review page isn't straight forward (applying it to the form-div doesn't work due to the padding)

Personally I would prefer no animation on desktop, but that's another matter. (and easily solvable using a user-stylesheet)

/* https://commonvoice.mozilla.org/sentence-collector/#/review */
body {
    overflow: hidden;
}

section.cards-container > div {
    transition: none !important;
}

[MichaelKohler]

Thanks! While this is definitely not the most perfect solution, I'm fine with this. I heavily doubt we're ever gonna have a case where we want the body to overflow horizontally.

[MichaelKohler]

Personally I would prefer no animation on desktop, but that's another matter. (and easily solvable using a user-stylesheet)

I quickly tested this with your snippet, and I'd say the swipe movement transition is probably enough, I don't think we need to have them fly further than just that. Additionally to that, this also completely disables the animation when using the buttons, which I think would be a very good thing. I think I would approve a PR implementing that :)

[MichaelKohler]

@olejorgenb I haven't created an issue for this, but you might be interested in fixing this (obviously only if you want to!):

If the full page doesn't fit in the viewport and you have to scroll down a bit, when using the buttons, mostly skip and approve, sometimes the viewport jumps up to the top of the page again. My guess would be that this is related to the transitions and possibly is a bug somewhere in the library, but haven't had time to investigate further. Would you like to have a look?

[olejorgenb]

Couldn't reproduce here 🤔 Unlikely to have time in the near future anyway :)

[MichaelKohler]

🎉 This PR is included in version 2.9.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀