Prevent double-indenting of the first line of a code block.

For reasons known only to the author, marked emits code blocks as

    <pre><code>your code here</code></pre>

Inline code, on the other hand, is emitted as

    <p>Non-code text <code>code text</code> non-code text.</p>

In d15bfb2b9a4872cba99bc966fe5c9c4399b3323c, we added a rule to give inline code nicer leading and trailing space, so that the borders don't directly abut the letters. However, we neglected to consider code blocks; the padding added for inline code also affected their first line, pushing it in slightly. This removes the padding from `<code>` when it is a direct child of a `<pre>`, as per the markup emitted by marked.

1 files changed, 12 insertions, 0 deletions

diff --git a/ui/styles/messages.css b/ui/styles/messages.css
index 26fc779..6b451bc 100644
--- a/ui/styles/messages.css
+++ b/ui/styles/messages.css
@@ -175,6 +175,12 @@
 }
 
 .message-body code {
+  /*
+   * Inline code (`like this`).
+   *
+   * Rules added here will also affect code blocks (```like this```) unless
+   * cancelled out in `.message-body pre > code`.
+   */
   white-space: pre-wrap;
   border: 1px solid #312e81;
   border-radius: 0.25rem;
@@ -183,8 +189,14 @@
 }
 
 .message-body pre > code {
+  /*
+   * Code blocks. Must also cancel out rules from inline code (in `.message-body code`), unless
+   * they should affect code blocks as well.
+   */
   white-space: none;
   border: none;
+  padding: 0;
+  margin: 0;
 }
 
 /* For rendered message bodies: */