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
parent
da53b6f7c7
commit
d348e77ad7
|
|
@ -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;"> </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;">
|
||||
|
|
|
|||
Loading…
Reference in New Issue