From fa1ab245afab9fcdd860582b0453ecd2b31e8066 Mon Sep 17 00:00:00 2001
From: Jon Rohan <rohan@github.com>
Date: Thu, 5 Oct 2017 13:48:50 -0700
Subject: [PATCH 1/3] Removing before after padding hack

---
 modules/primer-markdown/lib/code.scss | 12 ++----------
 1 file changed, 2 insertions(+), 10 deletions(-)

diff --git a/modules/primer-markdown/lib/code.scss b/modules/primer-markdown/lib/code.scss
index f703f9236d..437d0eab49 100644
--- a/modules/primer-markdown/lib/code.scss
+++ b/modules/primer-markdown/lib/code.scss
@@ -3,19 +3,11 @@
   // Inline code snippets
   code,
   tt {
-    padding: 0;
-    padding-top: 0.2em;
-    padding-bottom: 0.2em;
+    padding: 0.2em;
     margin: 0;
     font-size: 85%;
     background-color: rgba($black, 0.05);
-    border-radius: 3px; // don't add padding, gives scrollbars
-
-    &::before,
-    &::after {
-      letter-spacing: -0.2em; // this creates padding
-      content: "\00a0";
-    }
+    border-radius: 3px;
 
     br { display: none; }
   }

From 6626240e7ffc0d371943853c0c32c7c86ddbd2e3 Mon Sep 17 00:00:00 2001
From: Jon Rohan <rohan@github.com>
Date: Thu, 5 Oct 2017 15:18:11 -0700
Subject: [PATCH 2/3] adding markdown story to storybook

---
 .storybook/preview-head.html          |  1 -
 modules/primer-markdown/lib/code.scss |  7 +------
 modules/primer-markdown/stories.js    | 18 ++++++++++++++++++
 3 files changed, 19 insertions(+), 7 deletions(-)
 create mode 100644 modules/primer-markdown/stories.js

diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
index 03d0c82b2d..8283d59a14 100644
--- a/.storybook/preview-head.html
+++ b/.storybook/preview-head.html
@@ -1,2 +1 @@
-<link rel="stylesheet" href="https://unpkg.com/primer-css@9.2.0/build/build.css">
 <script src="https://github.com/site/assets/styleguide.js" async></script>
diff --git a/modules/primer-markdown/lib/code.scss b/modules/primer-markdown/lib/code.scss
index 437d0eab49..e9b2403331 100644
--- a/modules/primer-markdown/lib/code.scss
+++ b/modules/primer-markdown/lib/code.scss
@@ -3,7 +3,7 @@
   // Inline code snippets
   code,
   tt {
-    padding: 0.2em;
+    padding: 0.2em 0.4em;
     margin: 0;
     font-size: 85%;
     background-color: rgba($black, 0.05);
@@ -59,10 +59,5 @@
     word-wrap: normal;
     background-color: transparent;
     border: 0;
-
-    &::before,
-    &::after {
-      content: normal;
-    }
   }
 }
diff --git a/modules/primer-markdown/stories.js b/modules/primer-markdown/stories.js
new file mode 100644
index 0000000000..926c4a26ab
--- /dev/null
+++ b/modules/primer-markdown/stories.js
@@ -0,0 +1,18 @@
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+
+storiesOf('Markdown', module)
+  .add('code', () => (
+    <div className="markdown-body">
+      <p>
+        This is inline <code>code block</code>. This <code>code block has a &lt;br&gt;<br/> in it</code>. <code>When a code block has a long sentence in it, it should wrap the page to a new line</code>. Some people like to see the world burn and put <code>reallylongunbrokenstringsreallylongunbrokenstringsreallylongunbrokenstringsreallylongunbrokenstringsreallylongunbrokenstrings</code> in the code blocks.
+      </p>
+    </div>
+  ))
+  .add('pre', () => (
+    <div className="markdown-body">
+      <pre>
+        <code>Really long pre blocks should scroll horizontally when the words are longer than the parent container</code>
+      </pre>
+    </div>
+  ))

From cce0269026a4e1a48f83ea4a1d8ce11ef6ff2397 Mon Sep 17 00:00:00 2001
From: Jon Rohan <rohan@github.com>
Date: Wed, 8 Nov 2017 14:57:44 -0800
Subject: [PATCH 3/3] Using variables

---
 modules/primer-markdown/lib/code.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/modules/primer-markdown/lib/code.scss b/modules/primer-markdown/lib/code.scss
index e9b2403331..3cdd3f9bc4 100644
--- a/modules/primer-markdown/lib/code.scss
+++ b/modules/primer-markdown/lib/code.scss
@@ -7,7 +7,7 @@
     margin: 0;
     font-size: 85%;
     background-color: rgba($black, 0.05);
-    border-radius: 3px;
+    border-radius: $border-radius;
 
     br { display: none; }
   }
@@ -45,7 +45,7 @@
     font-size: 85%;
     line-height: 1.45;
     background-color: $gray-100;
-    border-radius: 3px;
+    border-radius: $border-radius;
   }
 
   pre code,