@remit/ui 0.0.29 → 0.0.30
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -107,7 +107,15 @@ export const MessageBodyView = ({
|
|
|
107
107
|
|
|
108
108
|
return (
|
|
109
109
|
<div className={cn("message-body", className)}>
|
|
110
|
-
{
|
|
110
|
+
{/* `message-body-notice` is a styling hook, not a style: a container
|
|
111
|
+
that drops the body's horizontal inset (the mobile reading pane)
|
|
112
|
+
uses it to give the gutter back to this notice, which is app
|
|
113
|
+
chrome rather than part of the email. */}
|
|
114
|
+
{blockedImageCount > 0 && (
|
|
115
|
+
<div className="message-body-notice">
|
|
116
|
+
{renderBlockedNotice?.(blockedImageCount)}
|
|
117
|
+
</div>
|
|
118
|
+
)}
|
|
111
119
|
|
|
112
120
|
{sanitizedHtml ? (
|
|
113
121
|
// Email HTML renders inside a sandboxed iframe so its own CSS and any
|
|
@@ -232,14 +232,21 @@ export function ExpandedMessage({
|
|
|
232
232
|
exactly what the app renders, not a divergent inline-HTML mock
|
|
233
233
|
(#940). `framed` fixtures map to the newsletter treatment (author
|
|
234
234
|
colors preserved); the rest render plain. */}
|
|
235
|
-
{
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
235
|
+
{/* On a phone the email runs edge to edge: the negative margin cancels
|
|
236
|
+
this block's `px-2` so no app canvas shows beside the body and the
|
|
237
|
+
email doesn't read as sitting in a tinted frame (#763). The header
|
|
238
|
+
keeps its inset. The blocked-images notice is app chrome, not part
|
|
239
|
+
of the email, so it takes the gutter back. Desktop is unchanged. */}
|
|
240
|
+
<div className="-mx-2 [&_.message-body-notice]:px-2 lg:mx-0 lg:[&_.message-body-notice]:px-0">
|
|
241
|
+
{body ?? (
|
|
242
|
+
<MessageBodyView
|
|
243
|
+
className="mt-3"
|
|
244
|
+
html={message.bodyHtml}
|
|
245
|
+
category={message.framed ? "newsletter" : "personal"}
|
|
246
|
+
allowImages
|
|
247
|
+
/>
|
|
248
|
+
)}
|
|
249
|
+
</div>
|
|
243
250
|
</div>
|
|
244
251
|
);
|
|
245
252
|
}
|