Improved bookmark thumbnail sizing in email cards

[minimaluminium]

ref https://linear.app/ghost/issue/DES-1275/mobile-newsletter-font-size-inconsistent-between-designs

Some bookmark cards exceeded Gmail mobile viewport width, which made Gmail auto-scale the whole email.
Thumbnail sizing now uses proportional width (33%) with a desktop cap (180px) to preserve desktop layout.

[coderabbitai]

Walkthrough

Updates the .kg-bookmark-thumbnail CSS rule in an email template styles file. Replaces the fixed min-width: 140px property with flex-based sizing using flex: 0 1 33%, width: 33%, and min-width: 33%, while retaining the max-width: 180px constraint. This modifies how the thumbnail element resizes within flex layouts by shifting from a fixed minimum width to percentage-based dimensions. The modification involves 3 added lines and 1 removed line.

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately summarizes the main change: improving bookmark thumbnail sizing in email cards, which directly aligns with the CSS modifications that shift from fixed to flexible sizing.
Description check	✅ Passed	The description is relevant to the changeset, providing context about the mobile viewport issue and explaining the proportional sizing solution (33% width with 180px cap) that matches the CSS changes.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch codex/mobile-email-bookmark-DES-1275

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In
`@ghost/core/core/server/services/email-service/email-templates/partials/styles.hbs`:
- Around line 1051-1054: The .kg-bookmark-container CSS sets min-width: 33%
which overrides the intended max-width: 180px on desktop; remove the conflicting
declaration (delete min-width: 33%) in the .kg-bookmark-container rule so
flex-basis/width: 33% and max-width: 180px can work together to cap the element
as intended while preserving proportional shrinking in narrow/non-flex clients.

[ErisDS]

🤖 Velo CI Failure Analysis

Classification: 🟠 SOFT FAIL

• Workflow: CI
• Failed Step: Integration tests
• Run: View failed run
  What failed: Test snapshot assertion failure in batch email utils
  Why: The root cause of the failure is a test snapshot assertion failure in the batch email utils code. This is a code issue, as the test is failing due to a mismatch between the expected and actual snapshot, indicating a problem with the code under test.
  Action:
  The author should review the batch email utils code and update the test snapshot to match the expected output, or fix the code to produce the expected output.