From a98464e9dd5ac7039d5bfdbeabc51971c298e17d Mon Sep 17 00:00:00 2001
From: John Otander <johnotander@gmail.com>
Date: Sun, 22 Jul 2018 11:35:33 -0600
Subject: [PATCH] Scroll overflow in editor

---
 src/LiveEditor.js                 |   1 +
 test/snapshots/components.js.md   |  22 +++++++++++-----------
 test/snapshots/components.js.snap | Bin 3260 -> 3257 bytes
 3 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/src/LiveEditor.js b/src/LiveEditor.js
index 8d262b7..56522ef 100644
--- a/src/LiveEditor.js
+++ b/src/LiveEditor.js
@@ -31,6 +31,7 @@ const Editor = styled(LiveEditor)([], {
   fontSize: '13px',
   margin: 0,
   padding: '16px',
+  overflow: 'auto',
   borderRadius: '0 0 2px 2px',
   '&:focus': {
     outline: 'none',
diff --git a/test/snapshots/components.js.md b/test/snapshots/components.js.md
index 01247bd..1b4e3cf 100644
--- a/test/snapshots/components.js.md
+++ b/test/snapshots/components.js.md
@@ -67,12 +67,12 @@ Generated by [AVA](https://ava.li).
 > Snapshot 1
 
     <div
-      className="sc-bbmXgH kzGbIY"
+      className="sc-gGBfsJ erWlxX"
       width={256}
     >
       <a
         borderColor="gray"
-        className="sc-gGBfsJ eBksKh"
+        className="sc-jnlKLf ihpWKr"
         href="/examples/hello"
         onClick={Function {}}
       >
@@ -117,7 +117,7 @@ Generated by [AVA](https://ava.li).
 
     [
       <div
-        className="sc-hEsumM dahmKO"
+        className="sc-ktHwxA fyNOzl"
       >
         <div
           className="sc-fMiknA jgVkvN sc-bwzfXH loXcNn sc-bdVaJa dYrRxR sc-bwzfXH hKiLMS sc-bdVaJa iHZvIS sc-bdVaJa iHZvIS"
@@ -152,10 +152,10 @@ Generated by [AVA](https://ava.li).
         />
       </div>,
       <div
-        className="sc-jnlKLf fQRDBU sc-bwzfXH hKiLMS sc-bdVaJa iHZvIS sc-bdVaJa iHZvIS"
+        className="sc-fYxtnH gSsCHS sc-bwzfXH hKiLMS sc-bdVaJa iHZvIS sc-bdVaJa iHZvIS"
       >
         <div
-          className="sc-fYxtnH VTytv"
+          className="sc-tilXH gVEpTs"
           onClick={Function onClick {}}
           open={false}
         >
@@ -175,14 +175,14 @@ Generated by [AVA](https://ava.li).
             className="sc-kgoBCf eSqAOl"
           />
           <ul
-            className="sc-cIShpX hSGVzQ"
+            className="sc-kafWEX kverYx"
           >
             <li
-              className="sc-kafWEX dNChzQ"
+              className="sc-feJyhm fRrBax"
             >
               <a
                 "aria-current"="page"
-                className="sc-feJyhm jUiESA sc-dnqmqq iUcnAA active"
+                className="sc-iELTvK gzpHzh sc-dnqmqq iUcnAA active"
                 href="/"
                 onClick={Function {}}
                 style={{}}
@@ -191,11 +191,11 @@ Generated by [AVA](https://ava.li).
               </a>
             </li>
             <li
-              className="sc-kafWEX dNChzQ"
+              className="sc-feJyhm fRrBax"
             >
               <a
                 'aria-current'={null}
-                className="sc-feJyhm jUiESA sc-dnqmqq iUcnAA"
+                className="sc-iELTvK gzpHzh sc-dnqmqq iUcnAA"
                 href="/about"
                 onClick={Function {}}
                 style={undefined}
@@ -213,7 +213,7 @@ Generated by [AVA](https://ava.li).
             className="sc-jAaTju jHRdEk sc-bdVaJa bAyxfd sc-bdVaJa iHZvIS"
           >
             <div
-              className="sc-ktHwxA dvWgCn sc-bdVaJa iHZvIS"
+              className="sc-cIShpX dbgqBq sc-bdVaJa iHZvIS"
             >
               Content
             </div>
diff --git a/test/snapshots/components.js.snap b/test/snapshots/components.js.snap
index bb21bfa622d0fc1b66905183b2f68c7984867034..74bf922599f2a6f3721c4633882745a20b31f234 100644
GIT binary patch
literal 3257
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

literal 3260
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