feat: make email wide on phone

[CreatorOfBiontium]

A few changes, mainly focused on making email fully wide on phone, and a few design changes.
This is a split up of #11754
Fixes #11663

[CreatorOfBiontium]

Hope I didn't forget anything @ChristophWurst. And while we are here, what to do with the animation, any suggestions, whether I should work on the way I did it in #11754 or leave it to someone else?

[ChristophWurst]

I've pushed a small change to refactor how the mobile breakpoint works. Unfortunately using a css var for a media query is not supported yet. So we'll go with a SCSS var.

[ChristophWurst]

Tested & works 🙏

[ChristophWurst]

Reworked the two commits. Main changes

• Semantic commit message
• Deduplicate CSS rules (stylelint error)
• Fix left-to-right/right-to-left issues
• ESLint issues

[ChristophWurst]

@CreatorOfBiontium please give this a final test to make sure I haven't lost anything in the clean-up 🙏

[CreatorOfBiontium]

@ChristophWurst Thanks, I have a lot to do this week, so I’d probably fix it over the weekend. I’ll test this when I get home.

[CreatorOfBiontium]

@ChristophWurst Tested and seems ok. My only concern is that in other languages, the unsub button is way too long, so it looks like this on narrow screens:

Do you think we should fix this here by like ellipsies? Or follow up in #12076 (or somewhere else) - but still I think it's not gonna be that easy, or maybe, idk.

[ChristophWurst]

We can leave it out here and solve one bug at a time :)

[github-actions]

Hello there,
Thank you so much for taking the time and effort to create a pull request to our Nextcloud project.

We hope that the review process is going smooth and is helpful for you. We want to ensure your pull request is reviewed to your satisfaction. If you have a moment, our community management team would very much appreciate your feedback on your experience with this PR review process.

Your feedback is valuable to us as we continuously strive to improve our community developer experience. Please take a moment to complete our short survey by clicking on the following link: https://cloud.nextcloud.com/apps/forms/s/i9Ago4EQRZ7TWxjfmeEpPkf6

Thank you for contributing to Nextcloud and we hope to hear from you soon!

(If you believe you should not receive this message, you can add yourself to the blocklist.)