chore: update newsletteremail template so emojis don't go on their own lines

[mbifulco]

No description provided.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
mikebifulco-com-bnbu	Ready	Preview	Comment	Dec 2, 2025 3:40pm

[Copilot]

Pull request overview

This PR addresses an email rendering issue where emojis were appearing on separate lines in newsletter emails. The fix involves adding CSS rules to display emojis inline with text and refactoring Text components to keep content together on single lines.

Key Changes

• Added CSS rules targeting emoji images with img[data-emoji] selector to force inline-block display with proper sizing
• Consolidated multi-line Text components into single-line components to prevent unwanted line breaks
• Split the sign-off message into two separate Text components for proper formatting

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 3 comments.

File	Description
src/utils/email/templates/NewsletterEmail.tsx	Refactored Text components to single lines and split sign-off message into two separate components
src/utils/email/templates/EmailLayout.tsx	Added CSS rules for emoji styling and consolidated footer text into single line

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

This line is extremely long (221 characters) and significantly impacts code readability and maintainability. Consider breaking it into multiple lines while keeping the content inline. For example:

<Text className="italic text-gray-500">
  Thanks for reading 💌 Tiny Improvements. If you found this helpful, I'd love it if you <Link href="https://mikebifulco.com/newsletter" className="text-pink-600">share it with a friend</Link>. It helps me out a great deal!
</Text>

This maintains the inline rendering while improving code readability.

Suggested change

	<Text className="italic text-gray-500">Thanks for reading 💌 Tiny Improvements. If you found this helpful, I'd love it if you <Link href="https://mikebifulco.com/newsletter" className="text-pink-600">share it with a friend</Link>. It helps me out a great deal!</Text>
	<Text className="italic text-gray-500">
	Thanks for reading 💌 Tiny Improvements. If you found this helpful, I'd love it if you{' '}
	<Link
	href="https://mikebifulco.com/newsletter"
	className="text-pink-600"
	>
	share it with a friend
	</Link>
	. It helps me out a great deal!
	</Text>

[Copilot]

This line is extremely long (198 characters) and significantly impacts code readability and maintainability. Consider breaking it into multiple lines while keeping the content inline. For example:

<Text className="my-0 text-sm">
  © {new Date().getFullYear()} &bull; 💌 Tiny Improvements &bull; <Link href="https://mikebifulco.com/newsletter" className="text-pink-600">mikebifulco.com</Link>
</Text>

This maintains the inline rendering while improving code readability.

Suggested change

	<Text className="my-0 text-sm">© {new Date().getFullYear()} &bull; 💌 Tiny Improvements &bull; <Link href="https://mikebifulco.com/newsletter" className="text-pink-600">mikebifulco.com</Link></Text>
	<Text className="my-0 text-sm">
	© {new Date().getFullYear()} &bull; 💌 Tiny Improvements &bull;{' '}
	<Link href="https://mikebifulco.com/newsletter" className="text-pink-600">
	mikebifulco.com
	</Link>
	</Text>

[Copilot]

The removal of display: block !important; from the general img selector may have unintended consequences for other images in the email (like the logo or footer images). This could cause layout issues with regular images that were relying on block display.

Consider keeping the block display for the general img selector and only overriding it for emoji images:

img {
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
}
img[data-emoji] {
  display: inline-block !important;
  vertical-align: middle !important;
  height: 1em !important;
  width: auto !important;
  margin: 0 !important;
}

Suggested change

	height: auto !important;
	height: auto !important;
	display: block !important;