Merge pull request #9064 from overleaf/jel-cta-email-layout

[web] Fix CTA emails layout

GitOrigin-RevId: 0e5de7a3c9bf383798e37b224332024f5e3eff59

services/web/app/src/Features/Email/Bodies/cta-email.js

@@ -5,7 +5,7 @@ module.exports = _.template(`\
 		<tbody>
 			<tr style="padding: 0; vertical-align: top;">
 				<th class="small-12 columns" style="line-height: 1.3; margin: 0 auto; padding: 0; padding-bottom: 16px; padding-left: 16px; padding-right: 16px; text-align: left;">
-					<table style="border-collapse: collapse; border-spacing: 0; padding: 0; text-align: left; vertical-align: top; width: 100%; color: #5D6879; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: normal; line-height: 1.3;">
+					<table class="cta-table" style="border-collapse: collapse; border-spacing: 0; padding: 0; text-align: left; vertical-align: top; width: 100%; color: #5D6879; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: normal; line-height: 1.3;">
 						<tr style="padding: 0; text-align: left; vertical-align: top;">
 							<th style="margin: 0; padding: 0; text-align: left;">
 								<% if (title) { %>

services/web/app/src/Features/Email/Layouts/BaseWithHeaderEmailLayout.js

@@ -55,6 +55,10 @@ module.exports = _.template(`\
 	.small-text-right {
 		text-align: right !important;
 	}
+
+	.cta-table {
+		table-layout: fixed;
+	}
 }
 
 @media only screen and (max-width: 596px) {