libscie / ResearchEquals.com

Research module server
https://researchequals.com
MIT License
88 stars 10 forks source link

Fix the Postmark template for the sign-up/verification emails #646

Closed nsunami closed 1 year ago

nsunami commented 2 years ago

Currently, the layout of the sign-up/verification emails is overflowing horizontally, as shown in the screenshots below.

This issue happened in viewing the email in:

  1. Apple Mail Version 16.0 (3696.120.41.1.1)
  2. Proton mail online app (mail.proton.me)

A fix would be to update the template of the Postmark. But, I'm not sure the best place to store it (Would it be best to store a template in this repo? If so, can we use that template in the Postmark API?)

Screenshots

Sign-up

image

Change email

image

Forgot password

image

Originally posted by @nsunami in https://github.com/libscie/ResearchEquals.com/pull/643#pullrequestreview-1087082545

nsunami commented 2 years ago

The problem is that in the "action_url" stretches out because it does not have a breaking character.

Currently:

HTML:

      <p class="sub">If you’re having trouble with the button above, copy and paste the URL below into your web browser.</p>
      <p class="sub">{{action_url}}</p>

CSS:

    p.sub {
      font-size: 13px;
    }

We may need to do two things:

  1. Use overflow-wrap: break-word; to the tag that's wrapping the action_url
  2. Fix the width of the element

Perhaps something like:

<p style="width: 384px; overflow-wrap: break-word;">{{action_url}}</p>
nsunami commented 2 years ago

@chartgerink Assigning you here since I don't have access to Postmark 🙏

github-actions[bot] commented 1 year ago

This issue is stale because it has been open 60 days with no activity.

chartgerink commented 1 year ago

Seems to work!

image

Closing as this is now fixed. Also fixed this in password reset.