From 283c747be2e65ded5646896eb9c2a75cb251d934 Mon Sep 17 00:00:00 2001 From: hrb-hub <181954414+hrb-hub@users.noreply.github.com> Date: Mon, 3 Feb 2025 17:46:03 +0100 Subject: [PATCH] Fix preformatted text in mail body not breaking on mobile Preformatted text in mail body is supposed to be wrapped on mobile but isn't due to an incorrect CSS selector. --- src/common/gui/main-styles.ts | 2 +- src/mail-app/mail/view/MailViewer.ts | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/src/common/gui/main-styles.ts b/src/common/gui/main-styles.ts index d83ce6f8c01b..959deffc3390 100644 --- a/src/common/gui/main-styles.ts +++ b/src/common/gui/main-styles.ts @@ -252,7 +252,7 @@ styles.registerStyle("main", () => { ".border-top": { "border-top": `1px solid ${theme.content_border}`, }, - "#mail-body.break-pre pre": { + "#shadow-mail-body.break-pre pre": { "white-space": "pre-wrap", "word-break": "normal", "overflow-wrap": "anywhere", diff --git a/src/mail-app/mail/view/MailViewer.ts b/src/mail-app/mail/view/MailViewer.ts index 51970a00a431..126d0ac57e66 100644 --- a/src/mail-app/mail/view/MailViewer.ts +++ b/src/mail-app/mail/view/MailViewer.ts @@ -390,6 +390,7 @@ export class MailViewer implements Component { this.shadowDomRoot.firstChild.remove() } const wrapNode = document.createElement("div") + wrapNode.id = "shadow-mail-body" wrapNode.className = "drag selectable touch-callout break-word-links" + (client.isMobileDevice() ? " break-pre" : "") wrapNode.setAttribute("data-testid", "mailBody_label") wrapNode.style.lineHeight = String(this.bodyLineHeight ? this.bodyLineHeight.toString() : size.line_height)