10-Apr-2026 — email: refresh Ramblers templates after mobile layout fixes #223
Make all Brevo templates fluid, consistent, and Ramblers-aligned
Rerun the Ramblers-aligned Brevo template reseed via a new forward migration so post-release layout refinements can be applied safely after the April rollout has already been processed in all environments.
Also tighten the campaign-style Angular notification body path so it renders more like the fixed transactional templates by:
- limiting mobile image scaling to the banner rather than all images, which stops footer icons being blown up on mobile
- replacing invalid paragraph-hosted markdown blocks with block containers
- flattening the committee notification message-item markup to remove an unnecessary nested table layer
- reasserting the shared email body typography on the nested campaign content wrapper so email clients do not fall back to inconsistent default sizing inside injected BODY_CONTENT
Further fixes in this amend:
- make committee notification tables fluid (width 100%) so they don't force mobile zoom-out
- apply ramblersEmailLayout() at send time rather than seed time so Brevo UI edits cannot strip responsive head elements (viewport meta, media queries, MSO properties)
- harden override marker sanitisation to tolerate whitespace and span wrapping added by Brevo's editor
- use descriptive link text for password reset links instead of exposing raw URLs
- rename "Send Committee notification" toast to generic "Send notification"
Introduce a shared Ramblers-aligned email base layout that all NGX transactional templates inherit from, matching the Ramblers MailChimp national campaign design system.
Layout builder (ramblers-email-layout.ts) generates complete HTML with:
- 600px max-width container, responsive at 768px and 480px breakpoints
- Helvetica/Arial 16px #222222 body, heading hierarchy per Ramblers spec
- Burnt orange (#c05711) links, charcoal (#404141) footer
- Social icons with Brevo conditionals, charity number, unsubscribe
- MSO/Outlook compatibility throughout
- Accent colour via {{params.messageMergeFields.ACCENT_COLOR}} merge field
Named accent palette (Sunrise #F9B104, Rosie cheeks #F6B09D, Mint cake #9BC8AB) stored as constants with three-layer cascade support: per-send override > per email type > Sunrise fallback.
All 8 Brevo HTML templates converted to body-content-only snippets wrapped by the shared layout at seed time. Welcome template "your your" typo fixed. Committee notification component colours aligned with design system.
New migration (20260406000000) reseeds all templates on deploy.
Follow-up fixes in the same commit:
- repair Brevo template reseeding to search all templates, preserve canonical IDs, archive or remove broken duplicates, and rewire stale notification config template references during the April migration
- harden sender handling and logging for Brevo template create/update flows, including clearer template-specific failures and sender-aware recovery for invalid remote template state
- add backend Brevo template rendering for realistic preview output and update committee/group-event notification preview tabs to use isolated iframe rendering rather than Angular DOM injection
- normalise salutation handling around ADDRESS_LINE so templates and Angular notification bodies no longer duplicate greetings
- align Ramblers-fed event contact links and CTA labels in notification previews with real event-type and remote-contact behaviour
- centralise default email link styling in render-time substitution so Angular-generated body links inherit the Ramblers email treatment more consistently
- refine shared layout spacing, divider alignment, mobile heading styling, footer icon layout, per-event separators, and preview scrolling based on live rendering checks
- update StringUtilsService.asTitle to normalise tokenised values through asWords first, with unit coverage for kebab-case and camelCase inputs