Markdown CSS tweaks (#15572)

Update Markdown CSS to more closely match GH rendering. Changes include
better nested list margins and tweaked font sizes.

Co-authored-by: Lauris BH <lauris@nix.lv>

1 files changed, 34 insertions, 24 deletions

diff --git a/web_src/less/_markdown.less b/web_src/less/_markdown.less
index 09c94f0678..66276894c0 100644
--- a/web_src/less/_markdown.less
+++ b/web_src/less/_markdown.less
@@ -1,7 +1,7 @@
 .markdown:not(code) {
   overflow: hidden;
   font-size: 16px;
-  line-height: 1.6 !important;
+  line-height: 1.5 !important;
   word-wrap: break-word;
 
   &.ui.segment {
@@ -75,14 +75,10 @@
   h4,
   h5,
   h6 {
-    margin-top: 1em;
+    margin-top: 24px;
     margin-bottom: 16px;
     font-weight: 600;
-    line-height: 1.4;
-
-    &:first-of-type {
-      margin-top: 0 !important;
-    }
+    line-height: 1.25;
   }
 
   h1 tt,
@@ -102,38 +98,36 @@
 
   h1 {
     padding-bottom: .3em;
-    font-size: 2.25em;
-    line-height: 1.2;
+    font-size: 2em;
     border-bottom: 1px solid var(--color-secondary);
   }
 
   h2 {
     padding-bottom: .3em;
-    font-size: 1.75em;
-    line-height: 1.225;
+    font-size: 1.5em;
     border-bottom: 1px solid var(--color-secondary);
   }
 
   h3 {
-    font-size: 1.5em;
-    line-height: 1.43;
+    font-size: 1.25em;
   }
 
   h4 {
-    font-size: 1.25em;
+    font-size: 1em;
   }
 
   h5 {
-    font-size: 1em;
+    font-size: .875em;
   }
 
   h6 {
-    font-size: 1em;
+    font-size: .85em;
     color: var(--color-text-light-2);
   }
 
   p,
   blockquote,
+  details,
   ul,
   ol,
   dl,
@@ -232,7 +226,11 @@
   }
 
   li > p {
-    margin-top: 0;
+    margin-top: 16px;
+  }
+
+  li + li {
+    margin-top: .25em;
   }
 
   dl {
@@ -268,10 +266,13 @@
   }
 
   table {
-    width: auto;
-    overflow: auto;
-    word-break: keep-all;
     display: block;
+    width: 100%;
+    width: -webkit-max-content;
+    width: -moz-max-content;
+    width: max-content;
+    max-width: 100%;
+    overflow: auto;
   }
 
   table th {
@@ -294,11 +295,20 @@
 
   img {
     max-width: 100%;
-    box-sizing: border-box;
+    box-sizing: initial;
+  }
+
+  img[align="right"] {
+    padding-left: 20px;
+  }
+
+  img[align="left"] {
+    padding-right: 20px;
   }
 
   .emoji {
     max-width: none;
+    vertical-align: text-top;
   }
 
   span.frame {
@@ -391,11 +401,11 @@
 
   code,
   tt {
-    padding: .2em .3em;
+    padding: .2em .4em;
     margin: 0;
     font-size: 85%;
     background-color: var(--color-markdown-code-block);
-    border-radius: 3px;
+    border-radius: 4px;
   }
 
   code br,
@@ -428,7 +438,7 @@
     font-size: 85%;
     line-height: 1.45;
     background-color: var(--color-markdown-code-block);
-    border-radius: 3px;
+    border-radius: 4px;
   }
 
   .highlight pre {