fix(directus): prevent email templates clipping on mobile by dembrane-sam-bot · Pull Request #608 · Dembrane/echo

dembrane-sam-bot · 2026-06-03T16:01:46Z

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 · 2026-06-03T16:01:59Z

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 · 2026-06-03T16:02:01Z

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

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

## What Routes the app's transactional email through SendGrid's **EU data residency** region so recipient PII and email content stay in EU data centers (GDPR). - Adds `SENDGRID_REGION` setting (`EmailSettings`), default `"eu"`. - `email.py` calls `set_sendgrid_data_residency(region)` before sending, switching the client host to `api.eu.sendgrid.com` when region != `global`. - Documents `SENDGRID_REGION` in `server/.env.sample`. ## Why dembrane is moving email to EU residency. An EU regional subuser (`sameer-eu`, EU IP `159.183.46.124`) and the `dembrane.com` domain authentication (EU CNAMEs in Cloudflare) are already set up. This wires the **app sender** (`email.py` → SendGrid HTTP API) to use it. Verified: a live test send via `api.eu.sendgrid.com` with the EU subuser key returns `202`, and the residency call flips the client host correctly. ## Requires (infra, not in this PR) 1. `SENDGRID_API_KEY` must be set to the **EU regional subuser** key (restricted Mail Send) in the `echo-api` + `echo-worker` sealed secrets. A global-account key won't be EU-resident even on the EU host. 2. **Separate path:** the `echo-directus` container sends its own emails via SMTP. To make those EU-resident too, set `EMAIL_SMTP_HOST=smtp.eu.sendgrid.net` and `EMAIL_SMTP_PASSWORD=<EU subuser key>` on that deployment. ## Scope note This is backend/infra email routing. It is **not** related to the email-template mobile-layout work in #608 / ECHO-832, despite both touching "email". 🤖 Generated with [Claude Code](https://claude.com/claude-code)  ## Summary by CodeRabbit * **Chores** * Added SendGrid data residency region configuration option to enable EU-compliant email delivery, with EU region set as the default. * Introduced environment variable support for customizing the configured email routing region. * Enhanced configuration documentation with EU data residency requirements and guidance on how regional routing affects recipient data handling.  --------- Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

fix(directus): fix mobile email templates clipping on right

8cd1e63

dembrane-sam-bot enabled auto-merge June 3, 2026 16:02

coderabbitai Bot added the bug Something isn't working label Jun 3, 2026

vercel Bot deployed to Preview June 4, 2026 13:16 View deployment

spashii force-pushed the sam/fix-mobile-email-padding branch from cff55d4 to 8cd1e63 Compare June 4, 2026 13:17

spashii mentioned this pull request Jun 4, 2026

feat(email): route SendGrid sends through EU data residency #619

Merged

spashii approved these changes Jun 9, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(directus): prevent email templates clipping on mobile#608

fix(directus): prevent email templates clipping on mobile#608
dembrane-sam-bot wants to merge 1 commit into
mainfrom
sam/fix-mobile-email-padding

dembrane-sam-bot commented Jun 3, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

github-actions Bot commented Jun 3, 2026

Uh oh!

coderabbitai Bot commented Jun 3, 2026 •

edited

Loading

Review limit reached

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

dembrane-sam-bot commented Jun 3, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Uh oh!

github-actions Bot commented Jun 3, 2026

Uh oh!

coderabbitai Bot commented Jun 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review limit reached

Walkthrough

Changes

Estimated code review effort

Suggested labels

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

dembrane-sam-bot commented Jun 3, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented Jun 3, 2026 •

edited

Loading