From 48dd0e21f9bbdf19ec4aad14e268b986e206e266 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Wed, 9 Dec 2020 15:03:45 +0100
Subject: [PATCH] Markdown: Enable wrapping in code blocks and a color tweak
 (#13894)

- Enable wrapping of long lines in code blocks like already done in code
  view.
- Slightly lighten the background of code blocks on default theme
- Darken the background on inline code and kbd elements on arc-green

Co-authored-by: 6543 <6543@obermui.de>
---
 web_src/less/_base.less     |  2 +-
 web_src/less/_markdown.less | 10 +++++-----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/web_src/less/_base.less b/web_src/less/_base.less
index 0e555daf9..be43bfbe3 100644
--- a/web_src/less/_base.less
+++ b/web_src/less/_base.less
@@ -96,7 +96,7 @@
   --color-menu: #ffffff;
   --color-card: #ffffff;
   --color-markdown-table-row: #00000008;
-  --color-markdown-code-block: #00000010;
+  --color-markdown-code-block: #00000008;
   --color-button: #ffffff;
   --color-code-bg: #ffffff;
   --color-shadow: #00000024;
diff --git a/web_src/less/_markdown.less b/web_src/less/_markdown.less
index 226173350..4c8ed77cb 100644
--- a/web_src/less/_markdown.less
+++ b/web_src/less/_markdown.less
@@ -343,7 +343,7 @@
     padding: .2em .3em;
     margin: 0;
     font-size: 85%;
-    background-color: var(--color-label);
+    background-color: var(--color-markdown-code-block);
     border-radius: 3px;
   }
 
@@ -360,8 +360,9 @@
     padding: 0;
     margin: 0;
     font-size: 100%;
-    word-break: normal;
-    white-space: pre;
+    white-space: pre-wrap;
+    word-break: break-all;
+    overflow-wrap: break-word;
     background: transparent;
     border: 0;
   }
@@ -373,7 +374,6 @@
   .highlight pre,
   pre {
     padding: 16px;
-    overflow: auto;
     font-size: 85%;
     line-height: 1.45;
     background-color: var(--color-markdown-code-block);
@@ -416,7 +416,7 @@
     line-height: 10px;
     color: var(--color-text-light);
     vertical-align: middle;
-    background-color: var(--color-label);
+    background-color: var(--color-markdown-code-block);
     border: 1px solid var(--color-secondary);
     border-radius: 3px;
     box-shadow: inset 0 -1px 0 var(--color-secondary);