From fde88c22a8367dee9a70b7240b3461cb611079dc Mon Sep 17 00:00:00 2001
From: Jade <software@lfcode.ca>
Date: Fri, 30 Jul 2021 00:13:25 -0700
Subject: [PATCH 1/5] Fix an x overflow with long inline code

Spotted on
https://rust-lang.github.io/rfcs/2603-rust-symbol-name-mangling-v0.html
---
 src/theme/css/general.css | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/theme/css/general.css b/src/theme/css/general.css
index ef2ba50489..5c9d4fa0bd 100644
--- a/src/theme/css/general.css
+++ b/src/theme/css/general.css
@@ -26,6 +26,11 @@ code {
     font-size: 0.875em; /* please adjust the ace font size accordingly in editor.js */
 }
 
+/* make long inline code not x overflow */
+:not(pre) > code {
+    word-break: break-word;
+}
+
 /* Don't change font size in headers. */
 h1 code, h2 code, h3 code, h4 code, h5 code, h6 code {
     font-size: unset;

From 85df785cd36d8bf986cf21e41ee072de995f446a Mon Sep 17 00:00:00 2001
From: Jade <software@lfcode.ca>
Date: Fri, 30 Jul 2021 01:11:36 -0700
Subject: [PATCH 2/5] Wrap tables in an overflow-x wrapper div

---
 src/theme/css/general.css |  5 +++++
 src/utils/mod.rs          | 18 +++++++++++++++++-
 2 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/src/theme/css/general.css b/src/theme/css/general.css
index 5c9d4fa0bd..ba89914373 100644
--- a/src/theme/css/general.css
+++ b/src/theme/css/general.css
@@ -31,6 +31,11 @@ code {
     word-break: break-word;
 }
 
+/* make wide tables scroll if they overflow */
+.table-wrapper {
+    overflow-x: auto;
+}
+
 /* Don't change font size in headers. */
 h1 code, h2 code, h3 code, h4 code, h5 code, h6 code {
     font-size: unset;
diff --git a/src/utils/mod.rs b/src/utils/mod.rs
index 44494a8b7b..174fcceb9e 100644
--- a/src/utils/mod.rs
+++ b/src/utils/mod.rs
@@ -177,12 +177,28 @@ pub fn render_markdown_with_path(text: &str, curly_quotes: bool, path: Option<&P
     let p = new_cmark_parser(text, curly_quotes);
     let events = p
         .map(clean_codeblock_headers)
-        .map(|event| adjust_links(event, path));
+        .map(|event| adjust_links(event, path))
+        .flat_map(|event| {
+            let (a, b) = wrap_tables(event);
+            a.into_iter().chain(b)
+        });
 
     html::push_html(&mut s, events);
     s
 }
 
+/// Wraps tables in a `.table-wrapper` class to apply overflow-x rules to.
+fn wrap_tables(event: Event<'_>) -> (Option<Event<'_>>, Option<Event<'_>>) {
+    match event {
+        Event::Start(Tag::Table(_)) => (
+            Some(Event::Html(r#"<div class="table-wrapper">"#.into())),
+            Some(event),
+        ),
+        Event::End(Tag::Table(_)) => (Some(event), Some(Event::Html(r#"</div>"#.into()))),
+        _ => (Some(event), None),
+    }
+}
+
 fn clean_codeblock_headers(event: Event<'_>) -> Event<'_> {
     match event {
         Event::Start(Tag::CodeBlock(CodeBlockKind::Fenced(ref info))) => {

From 89b580ab5278424f22cd7ac2be11c3d15beb8f79 Mon Sep 17 00:00:00 2001
From: Jade <software@lfcode.ca>
Date: Fri, 30 Jul 2021 01:17:02 -0700
Subject: [PATCH 3/5] Add a test for the table div-wrapping

---
 src/utils/mod.rs | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/src/utils/mod.rs b/src/utils/mod.rs
index 174fcceb9e..cd0a483778 100644
--- a/src/utils/mod.rs
+++ b/src/utils/mod.rs
@@ -257,6 +257,22 @@ mod tests {
             );
         }
 
+        #[test]
+        fn it_can_wrap_tables() {
+            let src = r#"
+| Original        | Punycode        | Punycode + Encoding |
+|-----------------|-----------------|---------------------|
+| føø             | f-5gaa          | f_5gaa              |
+"#;
+            let out = r#"
+<div class="table-wrapper"><table><thead><tr><th>Original</th><th>Punycode</th><th>Punycode + Encoding</th></tr></thead><tbody>
+<tr><td>føø</td><td>f-5gaa</td><td>f_5gaa</td></tr>
+</tbody></table>
+</div>
+"#.trim();
+            assert_eq!(render_markdown(src, false), out);
+        }
+
         #[test]
         fn it_can_keep_quotes_straight() {
             assert_eq!(render_markdown("'one'", false), "<p>'one'</p>\n");

From 59569984e2a4887504a6c579ac02e5b0c47b3e4b Mon Sep 17 00:00:00 2001
From: Jade <software@lfcode.ca>
Date: Wed, 8 Sep 2021 00:43:52 -0700
Subject: [PATCH 4/5] Address review: use overflow-wrap everywhere

---
 src/theme/css/general.css | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/theme/css/general.css b/src/theme/css/general.css
index ba89914373..5096bad158 100644
--- a/src/theme/css/general.css
+++ b/src/theme/css/general.css
@@ -26,9 +26,9 @@ code {
     font-size: 0.875em; /* please adjust the ace font size accordingly in editor.js */
 }
 
-/* make long inline code not x overflow */
-:not(pre) > code {
-    word-break: break-word;
+/* make long words/inline code not x overflow */
+main {
+    overflow-wrap: anywhere;
 }
 
 /* make wide tables scroll if they overflow */

From 4ae7ab5e872ebb8fd1165a9beb0745148a056277 Mon Sep 17 00:00:00 2001
From: Jade Lovelace <software@lfcode.ca>
Date: Thu, 27 Jan 2022 18:42:39 -0800
Subject: [PATCH 5/5] switch to break-word as suggested

---
 src/theme/css/general.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/theme/css/general.css b/src/theme/css/general.css
index 5096bad158..3174dca098 100644
--- a/src/theme/css/general.css
+++ b/src/theme/css/general.css
@@ -28,7 +28,7 @@ code {
 
 /* make long words/inline code not x overflow */
 main {
-    overflow-wrap: anywhere;
+    overflow-wrap: break-word;
 }
 
 /* make wide tables scroll if they overflow */