fix(email): correct member-row spacing in mentor welcome emails
All checks were successful
Build and Push Docker Image / build (push) Successful in 8m34s

Member/mentor/teammate tables used width:100%, stretching the two
columns apart and forcing names to wrap; wrapped names then misaligned
with their email (default vertical-align: middle).

Drop width:100% so tables hug content, add 16px column gap via name-cell
padding, and set vertical-align: top so emails align to the first line
of the name. Applied to getMentorBulkAssignmentTemplate and
getTeamMentorIntroductionTemplate.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Matt
2026-06-02 09:11:01 +02:00
parent eb891403f1
commit 6b37e9bb9e

View File

@@ -2882,8 +2882,8 @@ export function getTeamMentorIntroductionTemplate(
.map( .map(
(m) => ` (m) => `
<tr> <tr>
<td style="padding:6px 0;font-weight:600;color:#0f172a;">${escapeHtml(m.name ?? 'Mentor')}</td> <td style="padding:6px 16px 6px 0;font-weight:600;color:#0f172a;vertical-align:top;">${escapeHtml(m.name ?? 'Mentor')}</td>
<td style="padding:6px 0;"><a href="mailto:${escapeHtml(m.email)}" style="color:#053d57;text-decoration:none;">${escapeHtml(m.email)}</a></td> <td style="padding:6px 0;vertical-align:top;"><a href="mailto:${escapeHtml(m.email)}" style="color:#053d57;text-decoration:none;">${escapeHtml(m.email)}</a></td>
</tr>`, </tr>`,
) )
.join('') .join('')
@@ -2892,12 +2892,12 @@ export function getTeamMentorIntroductionTemplate(
teammates && teammates.length > 0 teammates && teammates.length > 0
? ` ? `
<h2 style="margin:24px 0 8px;color:#0f172a;font-size:15px;font-weight:600;">Your team</h2> <h2 style="margin:24px 0 8px;color:#0f172a;font-size:15px;font-weight:600;">Your team</h2>
<table style="width:100%;border-collapse:collapse;margin:0 0 8px;font-size:14px;">${teammates <table role="presentation" cellspacing="0" cellpadding="0" border="0" style="border-collapse:collapse;margin:0 0 8px;font-size:14px;">${teammates
.map( .map(
(t) => ` (t) => `
<tr> <tr>
<td style="padding:6px 0;color:#0f172a;">${escapeHtml(t.name ?? 'Team member')}</td> <td style="padding:6px 16px 6px 0;color:#0f172a;vertical-align:top;">${escapeHtml(t.name ?? 'Team member')}</td>
<td style="padding:6px 0;"><a href="mailto:${escapeHtml(t.email)}" style="color:#053d57;text-decoration:none;">${escapeHtml(t.email)}</a></td> <td style="padding:6px 0;vertical-align:top;"><a href="mailto:${escapeHtml(t.email)}" style="color:#053d57;text-decoration:none;">${escapeHtml(t.email)}</a></td>
</tr>`, </tr>`,
) )
.join('')}</table>` .join('')}</table>`
@@ -2920,7 +2920,7 @@ export function getTeamMentorIntroductionTemplate(
? `The mentoring round is now open and a mentor has been assigned to your project <strong>${escapeHtml(projectTitle)}</strong>:` ? `The mentoring round is now open and a mentor has been assigned to your project <strong>${escapeHtml(projectTitle)}</strong>:`
: `The mentoring round is now open and <strong>${count}</strong> mentors have been assigned to your project <strong>${escapeHtml(projectTitle)}</strong>:`, : `The mentoring round is now open and <strong>${count}</strong> mentors have been assigned to your project <strong>${escapeHtml(projectTitle)}</strong>:`,
)} )}
<table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0" style="border-collapse:collapse;margin:8px 0;font-size:14px;">${mentorHtmlList}</table> <table role="presentation" cellspacing="0" cellpadding="0" border="0" style="border-collapse:collapse;margin:8px 0;font-size:14px;">${mentorHtmlList}</table>
${teammatesHtml} ${teammatesHtml}
${instructionsHtml} ${instructionsHtml}
${ctaButton(workspaceUrl, 'Open Mentor Workspace')} ${ctaButton(workspaceUrl, 'Open Mentor Workspace')}
@@ -3024,10 +3024,10 @@ export function getMentorBulkAssignmentTemplate(
.map((p) => { .map((p) => {
const members = const members =
p.teamMembers && p.teamMembers.length > 0 p.teamMembers && p.teamMembers.length > 0
? `<table style="width:100%;border-collapse:collapse;margin:6px 0 0;font-size:13px;">${p.teamMembers ? `<table role="presentation" cellspacing="0" cellpadding="0" border="0" style="border-collapse:collapse;margin:6px 0 0;font-size:13px;">${p.teamMembers
.map( .map(
(m) => (m) =>
`<tr><td style="padding:3px 0;color:#0f172a;">${escapeHtml(m.name ?? 'Team member')}</td><td style="padding:3px 0;"><a href="mailto:${escapeHtml(m.email)}" style="color:#053d57;text-decoration:none;">${escapeHtml(m.email)}</a></td></tr>`, `<tr><td style="padding:3px 16px 3px 0;color:#0f172a;vertical-align:top;">${escapeHtml(m.name ?? 'Team member')}</td><td style="padding:3px 0;vertical-align:top;"><a href="mailto:${escapeHtml(m.email)}" style="color:#053d57;text-decoration:none;">${escapeHtml(m.email)}</a></td></tr>`,
) )
.join('')}</table>` .join('')}</table>`
: '' : ''