Use full screen width on mobile

[Sparkfog]

Is your feature request related to a problem? Please describe.

The email content is not using the full screen width. (Side note: the unsubscribe button seems to overlap.)

Describe the solution you'd like

For small screens (mobile), please adjust the layout so that the email content expands to use the full screen width, making it easier to read and interact with on limited space.
(Side note: there’s also an issue with the unsubscribe button that needs attention.)

Describe alternatives you've considered

No response

Additional context

No response

[ChristophWurst]

Thank you for the suggestion @Sparkfog

@nimishavijay do you think this makes sense?

[CreatorOfBiontium]

I could help with this! It seems lika an easy fix, I'd also fix some more issues with displaying emails on phones, like the top bar not being able to fully hide itself on phones - and it should do that. And the blank space under the email is worth a mention. There is a marging 30vh, that seems to me as useless.

I just need your approval to start working on this @ChristophWurst

[ChristophWurst]

Let's wait for @nimishavijay's input on this.

[nimishavijay]

Makes sense to me as well! Quickly checked Gmail and it seems to have the same behaviour :)

One problem I'd see with this is now the contents of the header is not aligned with the rest of the text, can be solved in a follow up. Possibly a fix would be to move the text into a different row and reduce its size to make sure we aren't losing too much vertical space. So the first row would have just the back arrow, and the rest of the items are in a different row and can be aligned nicely :)

[CreatorOfBiontium]

I'll make the email content full width (margin 12px from sides so it matches the header) if it's less wide than 500px. Then make the email subject a bit smaller on phones and make sure it's aligned with the email content. What do you think @nimishavijay

[CreatorOfBiontium]

Update on what I've done so far - it isn't exactly what @nimishavijay said, but what do you think? It's just an suggestion

Before:
https://github.com/user-attachments/assets/526f9ac5-252a-4204-a169-997432fabb22

After:
https://github.com/user-attachments/assets/1bd188b5-44d9-46da-b990-e7b13cf81682

[ChristophWurst]

@nimishavijay wdyt?

[nimishavijay]

@ChristophWurst commented in the PR :)