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(
(m) => `
<tr>
<td style="padding:6px 0;font-weight:600;color:#0f172a;">${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 16px 6px 0;font-weight:600;color:#0f172a;vertical-align:top;">${escapeHtml(m.name ?? 'Mentor')}</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>`,
)
.join('')
@@ -2892,12 +2892,12 @@ export function getTeamMentorIntroductionTemplate(
teammates && teammates.length > 0
? `
<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(
(t) => `
<tr>
<td style="padding:6px 0;color:#0f172a;">${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 16px 6px 0;color:#0f172a;vertical-align:top;">${escapeHtml(t.name ?? 'Team member')}</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>`,
)
.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 <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}
${instructionsHtml}
${ctaButton(workspaceUrl, 'Open Mentor Workspace')}
@@ -3024,10 +3024,10 @@ export function getMentorBulkAssignmentTemplate(
.map((p) => {
const members =
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(
(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>`
: ''