From 4f8a235b02732eba6196615f9cbcc83053f1ecea Mon Sep 17 00:00:00 2001
From: Kyle Suss <susskyle@gmail.com>
Date: Tue, 8 Oct 2019 16:20:15 -0600
Subject: [PATCH] Fix wrapping, overflow on Highlight component

---
 src/components/Highlight.js         |  5 +++++
 src/components/Highlight.stories.js | 10 ++++++++++
 2 files changed, 15 insertions(+)

diff --git a/src/components/Highlight.js b/src/components/Highlight.js
index 1e865dc3..f032ba42 100644
--- a/src/components/Highlight.js
+++ b/src/components/Highlight.js
@@ -27,10 +27,15 @@ const HighlightBlock = styled.div`
     color: ${color.darkest};
   }
 
+  code {
+    white-space: pre;
+  }
+
   pre {
     padding: 11px 1rem;
     margin: 1rem 0;
     background: ${color.lighter};
+    overflow: auto;
   }
 
   .language-bash .token.operator,
diff --git a/src/components/Highlight.stories.js b/src/components/Highlight.stories.js
index 31109bc1..b6b566af 100644
--- a/src/components/Highlight.stories.js
+++ b/src/components/Highlight.stories.js
@@ -122,6 +122,16 @@ export const json = () => (
   </>
 );
 
+const SmallContainer = styled.div`
+  max-width: 300px;
+`;
+
+export const wrapping = () => (
+  <SmallContainer>
+    <Highlight language="javascript">{javascriptCode}</Highlight>
+  </SmallContainer>
+);
+
 const StyledHighlight = styled(Highlight)`
   code,
   pre {