fix horizontal scrolling issue

README.md

@@ -9,6 +9,7 @@ I modified [CodeFlask](https://github.com/kazzkiq/CodeFlask) to be able to...
 1. Make PrismJS a peer dependency
 1. Attach custom event listeners to the editor
 1. Support the [Line Highlight](https://prismjs.com/plugins/line-highlight/) plugin in PrismJS
+1. Fix this issue: kazzkiq/CodeFlask#69
 
 ```javascript
 import CodeFlask from "codeflask"
@@ -33,4 +34,4 @@ flask.highlightLines("4-7")
 PrismJS is highly customizable.
 It actually offers custom builds with more plugins that you can opt into.
 This is an awesome and rare feature b/c you can minimize the bundle by omitting unneeded functionality.
-Therefore, it should be a peer dependency, b/c CodeFlask can't know which build with which plugins you'll need.
+Therefore, it should be a peer dependency, b/c CodeFlask can't know which build with which plugins you'll need.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@acarl005/codeflask",
-  "version": "2.0.5",
+  "version": "2.0.6",
   "description": "A micro code-editor for awesome web pages",
   "main": "build/codeflask.min.js",
   "module": "build/codeflask.module.js",

src/codeflask.js

@@ -190,6 +190,7 @@ export default class CodeFlask {
       this.elPre.style.transform = `translate3d(-${e.target.scrollLeft}px, -${e.target.scrollTop}px, 0)`
       if (this.elLineNumbers) {
         this.elLineNumbers.style.transform = `translate3d(0, -${e.target.scrollTop}px, 0)`
+        this.elPre.style.width = `calc(100% - 40px + ${e.target.scrollLeft}px)`
       }
     })
   }

src/styles/editor.js

@@ -88,7 +88,9 @@ export const editorCss = `
     height: 100%;
     text-align: right;
     color: #999;
-    z-index: 2;
+    border-right: 1px solid #f8f8f8;
+    background-color: #fafafa;
+    z-index: 5;
   }
 
   .codeflask__lines__line {
@@ -109,4 +111,4 @@ export const editorCss = `
     background: #eee;
     z-index: 1;
   }
-`
+`