fix(mail): force the logo size via inline CSS; brand header inside the card

Some clients (Apple Mail among them) ignore the width/height ATTRIBUTES
on embedded images and rendered the 192px CID logo at full size. Force
24px via inline CSS (width/height/max-*) as well, and move the brand row
inside the card as a proper hairline-separated header — tighter, tidier.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
feat/v1-foundation
boban 2026-07-06 21:23:47 +02:00
parent da53b6f7c7
commit d348e77ad7
1 changed files with 22 additions and 20 deletions

View File

@ -47,26 +47,6 @@
<td align="center" style="padding:32px 12px;">
<table role="presentation" width="600" cellpadding="0" cellspacing="0" border="0" style="width:600px; max-width:100%;">
{{-- Brand row --}}
<tr>
<td style="padding:0 4px 14px 4px;">
<table role="presentation" cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="vertical-align:middle;">
<img src="{{ $message->embed(public_path('icon-192.png')) }}" width="28" height="28" alt="Clusev"
style="display:block; border:0; border-radius:6px;">
</td>
<td style="vertical-align:middle; padding-left:10px; font-family:{{ $sans }}; font-size:17px; font-weight:700; letter-spacing:0.04em; color:{{ $ink }};">
Clus<span style="color:{{ $accent }};">e</span>v
</td>
<td style="vertical-align:middle; padding-left:12px; font-family:{{ $mono }}; font-size:10px; letter-spacing:0.22em; text-transform:uppercase; color:{{ $ink3 }};">
{{ __('alerts.mail_brand_tag') }}
</td>
</tr>
</table>
</td>
</tr>
{{-- Card --}}
<tr>
<td style="background-color:{{ $surface }}; border:1px solid {{ $line }}; border-radius:12px; overflow:hidden;">
@ -75,6 +55,28 @@
{{-- Signal rail --}}
<tr><td style="height:4px; background-color:{{ $state }}; font-size:0; line-height:0;">&nbsp;</td></tr>
{{-- Brand header (inside the card): size forced via inline CSS too
several clients ignore the width/height ATTRIBUTES on embedded
images and would render the 192px source at full size. --}}
<tr>
<td style="padding:14px 28px; border-bottom:1px solid {{ $line }};">
<table role="presentation" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="24" style="width:24px; vertical-align:middle;">
<img src="{{ $message->embed(public_path('icon-192.png')) }}" width="24" height="24" alt=""
style="display:block; width:24px; height:24px; max-width:24px; max-height:24px; border:0; border-radius:5px;">
</td>
<td style="vertical-align:middle; padding-left:10px; font-family:{{ $sans }}; font-size:15px; font-weight:700; letter-spacing:0.04em; color:{{ $ink }}; white-space:nowrap;">
Clus<span style="color:{{ $accent }};">e</span>v
</td>
<td style="vertical-align:middle; padding-left:12px; font-family:{{ $mono }}; font-size:10px; letter-spacing:0.22em; text-transform:uppercase; color:{{ $ink3 }}; white-space:nowrap;">
{{ __('alerts.mail_brand_tag') }}
</td>
</tr>
</table>
</td>
</tr>
{{-- Status band --}}
<tr>
<td style="padding:18px 28px 0 28px;">