fix(directus): prevent email templates clipping on mobile

[dembrane-sam-bot]

What this changes

• emails received on mobile devices no longer clip on the right side, fitting the viewport cleanly (was: clipped white card layout, logo, and CTA on screens <= 600px wide) — email-base.liquid, report-notification-en.liquid, report-notification-nl.liquid
• outer margins of the email cards reduce to 12px on mobile to give more breathing room to content — email-base.liquid, report-notification-en.liquid, report-notification-nl.liquid

Confidence: high. Standard email layout practice is to place padding on cells (<td>) instead of the container <table>, which avoids WebKit viewport calculation bugs on responsive tables. Tested locally via inspection of the HTML layout tree.

Refs: Slack message C0884QPQF6W-1780501376.541469

Summary by CodeRabbit

• Bug Fixes
  • Enhanced responsive spacing and layout consistency in email notifications for improved display across mobile and desktop devices.

[github-actions]

Hi @dembrane-sam-bot!

Thank you for contributing to Dembrane ECHO! Before we consider your Pull Request, we ask that you sign our Contributor License Agreement (CLA). This is only required for your first Pull Request.

Please review the CLA, and sign it by adding your GitHub username to the contributors.yml file. Thanks!

[coderabbitai]

Warning

Review limit reached

@spashii, we couldn't start this review because you've reached your PR review rate limit.

More reviews will be available in 15 seconds. Learn how PR review limits work.

Your organization has run out of usage credits. Purchase more in the billing tab.

⌛ How to resolve this issue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans include higher PR review limits than trial, open-source, and free plans. In all cases, reviews become available again over time. During sustained high-volume PR review activity, CodeRabbit may temporarily slow when the next review becomes available.

Please see our Fair Usage Limits Policy for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro

Run ID: a45acc76-cdc2-47fa-9389-1c2054171d6b

📥 Commits

Reviewing files that changed from the base of the PR and between 8cd1e63 and cff55d4.

📒 Files selected for processing (3)

• echo/server/.env.sample
• echo/server/dembrane/email.py
• echo/server/dembrane/settings.py

Walkthrough

Three email templates (base, English, and Dutch notifications) are refactored to move outer padding from inline table styles to a dedicated outer-padding class on inner table cells, with corresponding media query updates ensuring responsive padding adjustments on mobile viewports.

Changes

Email template padding and responsive layout refactor

Layer / File(s)	Summary
Email base template padding structure echo/directus/templates/email-base.liquid	Padding 40px 20px relocated from outer <table> inline style to <td class="outer-padding">, with media query extended to apply mobile overrides (24px 12px) to both .card-inner and .outer-padding.
English notification template refactor echo/directus/templates/report-notification-en.liquid	Media query expanded from single-line to multi-line block format. Outer table padding moved to inner <td class="outer-padding"> with inline style, while table retains only background-color.
Dutch notification template refactor echo/directus/templates/report-notification-nl.liquid	Media query expanded to include responsive padding for .outer-padding in addition to .card-inner. Outer table padding relocated to inner <td class="outer-padding"> with matching inline style applied.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~4 minutes

Suggested labels

bug

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'fix(directus): prevent email templates clipping on mobile' directly addresses the main change — fixing responsive email layout issues on mobile devices by adjusting padding and preventing content clipping.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

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

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch sam/fix-mobile-email-padding

---

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.}