Login: fix Google button covering error label

[nheagy]

Fixes #7898

To test:

• ensure the input field and labels still work as before
• ensure the error label can't be covered by the Google button

Needs review: @aerych
Note: forked from #7887

[aerych]

Looks like there is some spacing issues on the SE when the keyboard is present.

Before:

After:

Notice how the info text is truncating where it wasn't before.

I also noticed the same thing you did, when the error screen is visible space is very tight.

Localizations can make this worse. German is one example that comes to mind. I wonder if the error should replace the Google button in these cases. Not sure. Thoughts?

[nheagy]

I wonder if the error should replace the Google button in these cases.

Ya, that's probably the right thing to do. @folletto any thoughts?

[folletto]

I replied on Slack, reporting here too:

The mental model for that should be that the bottom "log into... Next" is on a separate floating block on top (z-index: 1 equivalent) so the "page" scrolls below
Another alternative would be to hide Google login message when this condition is true: keyboard visible && error message

[aerych]

Another alternative would be to hide Google login message when this condition is true: keyboard visible && error message

👍

[nheagy]

Ok, @aerych this is ready for another look.

Here's how hiding the Google button looks, cc @folletto

[aerych]

Small nitpick... could we leave the button visible when there is an external keyboard in use?

[aerych]

By the way... the button transition when the keyboard hides/shows is very nice :)

[folletto]

Well done 👍

[nheagy]

Fixed the appearance on iPad and the conflicts.

Assuming Hound is pleased, this should be ready for another loock @aerych

[aerych]

Very nice. once podfile lock merge conflicts are sorted :)