resizing window

src/app.js

@@ -87,7 +87,6 @@ var css = csjs`
     top                : 0;
     bottom             : 0;
     overflow           : hidden;
-    width              : 82%;
   }
   .iconpanel           {
     background-color  : ${styles.leftPanel.backgroundColor_Panel};
@@ -106,8 +105,7 @@ var css = csjs`
     position           : absolute;
     top                : 0;
     bottom             : 0;
-    overflow           : hidden;
-    width              : 16%;
+    overflow           : hidden
   }
   .highlightcode {
     position:absolute;
@@ -191,7 +189,7 @@ class App {
     self._view.swappanel.style.left = self._view.iconpanel.clientWidth + 'px'
     self._view.mainpanel.style.left = (self._view.iconpanel.clientWidth + self._view.swappanel.clientWidth) + 'px'
 
-    let resizeFeature = new PanelsResize('#swap-panel', '#editor-container', { 'minWidth': 300 }) // eslint-disable-line
+    let resizeFeature = new PanelsResize('#swap-panel', '#editor-container', { 'minWidth': 400, x: 450 }) // eslint-disable-line
     run.apply(self)
   }
 

src/app/components/swap-panel-component.js

@@ -50,14 +50,13 @@ module.exports = SwapPanelComponent
 const css = csjs`
   .plugins        {
     height:        : 100%;
-    overflow-y: auto;
-    margin-right: 10px;
+    overflow-y     : auto;
   }
   .plugItIn       {
     display        : none;
     height         : 100%;
   }
   .plugItIn.active     {
-    display        :block;
+    display        : block;
   }
 `

src/lib/panels-resize.js

@@ -26,6 +26,13 @@ const css = csjs`
   }
 `
 
+/*
+* opt: 
+*   minWidth  : minimn width for panels
+*   x         : position of gutter at load
+*
+*
+*/
 export default class PanelsResize {
   constructor (idpanel1, idpanel2, opt) {
     var panel1 = document.querySelector(idpanel1)
@@ -59,15 +66,19 @@ export default class PanelsResize {
       ghostbar.style.left = event.x + 'px'
     }
 
+    let setPosition = (event) => {
+      let p = processPositiions(event)
+      panel1.style.width = p.panel1Width + 'px'
+      panel2.style.left = p.panel2left + 'px'
+      panel2.style.width = p.panel2Width + 'px'
+    }
+
     let removeGhostbar = (event) => {
       document.body.removeChild(ghostbar)
       document.removeEventListener('mousemove', moveGhostbar)
       document.removeEventListener('mouseup', removeGhostbar)
       document.removeEventListener('keydown', cancelGhostbar)
-      let p = processPositiions(event)
-      panel1.style.width = p.panel1Width + 'px'
-      panel2.style.left = p.panel2left + 'px'
-      panel2.style.width = p.panel2Width + 'px'
+      setPosition(event)
     }
 
     let processPositiions = (event) => {
@@ -79,7 +90,13 @@ export default class PanelsResize {
       return { panel1Width, panel2left, panel2Width }
     }
 
+    window.addEventListener('resize', function (event){
+      setPosition({ x: panel1.offsetLeft + panel1.clientWidth })
+    })
+  
     var dragbar = yo`<div onmousedown=${mousedown} class=${css.dragbar}></div>`
     panel1.appendChild(dragbar)
+
+    setPosition(opt)
   }
 }