[geary/mjog/283-plain-text-whitespace-fixes: 4/4] ConversationWebView: Fix plain text emails sometimes being too wide

[Michael Gratton <mjog src gnome org>]

commit 2bcf0def89ed2d4fdcd0bb77d5f74db5793ad3a4
Author: Michael Gratton <mike vee net>
Date:   Sat Oct 17 13:45:23 2020 +1100

    ConversationWebView: Fix plain text emails sometimes being too wide
    
    Using `whitespace: pre-wrap` to format plain text email sometimes
    causes additional width to be allocated by the plain text blocks that
    then does not get used due to the constraints on the HTML element.
    The allocated space remains however and hence an un-needed horizontal
    scrollbar appears.
    
    Using `break-spaces` instead seems to help since it allows breaks after
    a space character, leading to the additional space not otherwise being
    allocated.

 src/engine/rfc822/rfc822-gmime-filter-blockquotes.vala | 2 +-
 ui/composer-web-view.css                               | 2 +-
 ui/composer-web-view.js                                | 2 +-
 ui/conversation-web-view.css                           | 2 +-
 ui/conversation-web-view.js                            | 2 +-
 5 files changed, 5 insertions(+), 5 deletions(-)
---
diff --git a/src/engine/rfc822/rfc822-gmime-filter-blockquotes.vala 
b/src/engine/rfc822/rfc822-gmime-filter-blockquotes.vala
index 8cf7563d4..d2a941c02 100644
--- a/src/engine/rfc822/rfc822-gmime-filter-blockquotes.vala
+++ b/src/engine/rfc822/rfc822-gmime-filter-blockquotes.vala
@@ -59,7 +59,7 @@ private class Geary.RFC822.FilterBlockquotes : GMime.Filter {
         if (!initial_element) {
             // We set the style explicitly so it will be set in HTML emails.  We also give it a
             // class so users can customize the style in the viewer.
-            insert_string("<div class=\"plaintext\" style=\"white-space: pre-wrap;\">", ref out_index);
+            insert_string("<div class=\"plaintext\" style=\"white-space: break-spaces;\">", ref out_index);
             initial_element = true;
         }
 
diff --git a/ui/composer-web-view.css b/ui/composer-web-view.css
index 07ae68694..462d5876b 100644
--- a/ui/composer-web-view.css
+++ b/ui/composer-web-view.css
@@ -60,6 +60,6 @@ blockquote {
 }
 
 pre {
-  white-space: pre-wrap;
+  white-space: break-spaces;
   margin: 0;
 }
diff --git a/ui/composer-web-view.js b/ui/composer-web-view.js
index 5ee4105e1..bd010b6c5 100644
--- a/ui/composer-web-view.js
+++ b/ui/composer-web-view.js
@@ -264,7 +264,7 @@ ComposerPageState.prototype = {
     },
     tabOut: function() {
         document.execCommand(
-            "inserthtml", false, "<span style='white-space: pre-wrap'>\t</span>"
+            "inserthtml", false, "<span style='white-space: break-spaces'>\t</span>"
         );
     },
     tabIn: function() {
diff --git a/ui/conversation-web-view.css b/ui/conversation-web-view.css
index 8b0ef421b..d1da2eae5 100644
--- a/ui/conversation-web-view.css
+++ b/ui/conversation-web-view.css
@@ -77,7 +77,7 @@ blockquote {
 }
 
 pre {
-  white-space: pre-wrap;
+  white-space: break-spaces;
 }
 
 /**
diff --git a/ui/conversation-web-view.js b/ui/conversation-web-view.js
index 1d730d475..7b3a1c890 100644
--- a/ui/conversation-web-view.js
+++ b/ui/conversation-web-view.js
@@ -213,7 +213,7 @@ ConversationPageState.prototype = {
             if (ConversationPageState.isDescendantOf(
                 ancestor, "DIV", "plaintext", false)) {
                 dummy.classList.add("plaintext");
-                dummy.setAttribute("style", "white-space: pre-wrap;");
+                dummy.setAttribute("style", "white-space: break-spaces;");
                 includeDummy = true;
             }
             dummy.appendChild(range.cloneContents());