mirror of
https://github.com/pocket-id/pocket-id.git
synced 2025-12-09 17:23:22 +03:00
🐛 Bug Report: No margins in email templates #136
Reference in New Issue
Block a user
Delete Branch "%!s()"
Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?
Originally created by @ilyakonovalenko on GitHub.
Originally assigned to: @kmendell on GitHub.
Reproduction steps
I noticed there are no margins in the email templates. So the email looks bad:
The solution may be background removal (so let's make it white) or top and bottom margings.
Expected behavior
Top and bottom margins.
Actual Behavior
No top and bottom margins so the content box looks bad.
Version and Environment
v1.5.0
Log Output
No response
@kmendell commented on GitHub:
Some email clients dont support the html templates, i think thunderbird was on from a older issue, so it falls back to text based templates.
The margin is defined in the html template though
@kmendell commented on GitHub:
I can make the change and have you test it, ill try to work on it today.
@ilyakonovalenko commented on GitHub:
I think the problem comes from CSS styles are not defined for each HTML element via style. Many email clients do not process CSS in <style> tag correctly or ignore some instructions. Any CSS styling should be added to each HTML tag.
So like:
@ilyakonovalenko commented on GitHub:
The screenshot is from RoundCube web mail client. Other email clients I have do not display any styling for the email at all. So something is definately wrong.
@kmendell commented on GitHub:
What email client are you using? It looks fine for me in the Apple Mail app.
This most likley a email client issue that can render the html/css properly if i had to guess. Just a theory though.
@kmendell commented on GitHub:
@ilyakonovalenko Can you try the
ghcr.io/pocket-id/pocket-id:email-templates-marginsimage?@kmendell commented on GitHub:
@ilyakonovalenko After talking with Elias we are going to try a nre approach for email templates maybe, Will keep you updated.
@kmendell commented on GitHub:
@ilyakonovalenko Can you try this same image again please?
ghcr.io/pocket-id/pocket-id:email-templates-margins@ilyakonovalenko commented on GitHub:
Yes. Let's test it. One thing I am on Docker setup. So it could be a bit complicated to change template as they are not stored in local file system. (by the way, nice idea to add an ability to use custom email templates in Docker).
@ilyakonovalenko commented on GitHub:
It seems you missed
<div class="container">element which has missed margins. So nothing changed.@kmendell commented on GitHub:
This is also the react.email version, so it wont be able to be merged till elias gets back but wanted to see if it works for you at least.
@ilyakonovalenko commented on GitHub:
It looks better now. At least the border and shadow are now displaying in all email clients I have. It is not ideal though.
I just tested a bit and here are my changes based on Pocket ID web interface CSS:
In this way it looks much better (if shadows really needed):
Another idea is to rewrite templates to tables instead of divs as tables work much better in email clients.
@kmendell commented on GitHub:
@ilyakonovalenko Can you try this image:
ghcr.io/pocket-id/pocket-id:email-template-margins(note its not the same one as before i remoevd the s from template)@kmendell commented on GitHub:
Ill try a different approach here in a bit to see if its better.
@kmendell commented on GitHub:
the idea was to try and use react.email, but ill have to wait to elias gets back before we can do that fully.
@ilyakonovalenko commented on GitHub:
email-template-marginsbuild looks good to me. Thank you!One small thing to consider - logos in SVG format are not supported by many email clients, so they don't display logo. It would be nice if there is a WEBP or PNG version for emails.
@kmendell commented on GitHub:
Potentially, Ill have to look at it. Waiting till Elias gets back to deep dive into this one, as not sure we will stick with react.email or not.
@kmendell commented on GitHub:
@ilyakonovalenko The logo used is from the Pocket ID Instance it self, there is a fallback if no logo is defined , but it should really never get hit. Either way that fallback is a PNG. Ultimately the logo used is what the admin has defined in pocket id. The instance has to be publicly accessible for it to work though.
@ElioDiNino commented on GitHub:
Could there be an option to disable including the logo in emails? My instance is not publicly available (it's behind a VPN) so the emails all look a bit broken, which isn't a great user experience (see below). Alternatively, have an option to override the URL used for the emails (so I could point it at somewhere like Dashboard Icons instead)