fixed some sizes

src/app.js

@@ -72,6 +72,7 @@ var css = csjs`
     display            : flex;
     flex-direction     : column;
     overflow           : hidden;
+    flex               : 1;
   }
   .iconpanel           {
     display            : flex;
@@ -83,6 +84,7 @@ var css = csjs`
   .sidepanel          {
     display            : flex;
     flex-direction     : row-reverse;
+    width              : 320px;
   }
   .highlightcode {
     position:absolute;

src/app/components/side-panel.js

@@ -23,7 +23,6 @@ const css = csjs`
   }
   .swapitHeader {
     height: 35px;
-    padding: 15px 20px;
     display: flex;
     align-items: center;
   }
@@ -33,7 +32,6 @@ const css = csjs`
   }
   .pluginsContainer {
     height: 100%;
-    flex: 1;
     overflow-y: auto;
   }
   .titleInfo {
@@ -132,7 +130,7 @@ export class SidePanel extends AbstractPanel {
     }
 
     return yo`
-      <header class="${css.swapitHeader}">
+      <header class="${css.swapitHeader} px-3">
         <h6 class="${css.swapitTitle}">${name}</h6>
         ${docLink}
         ${versionWarning}
@@ -144,7 +142,7 @@ export class SidePanel extends AbstractPanel {
     return yo`
       <section class="${css.panel}">
         ${this.header}
-        <div class="${css.pluginsContainer}">
+        <div class="${css.pluginsContainer} py-1">
           ${this.view}
         </div>
       </section>`

src/app/components/vertical-icons.js

@@ -160,9 +160,9 @@ export class VerticalIcons extends Plugin {
     })
 
     // remove active
-    const currentActive = this.view.querySelector(`.${css.active}`)
+    const currentActive = this.view.querySelector(`.active`)
     if (currentActive) {
-      currentActive.classList.remove(css.active)
+      currentActive.classList.remove(`active`)
     }
   }
 
@@ -176,7 +176,7 @@ export class VerticalIcons extends Plugin {
     const nextActive = this.view.querySelector(`[plugin="${name}"]`)
     if (nextActive) {
       let image = nextActive.querySelector('.image')
-      nextActive.classList.add(css.active)
+      nextActive.classList.add(`active`)
       image.style.setProperty('filter', `invert(${invert}) grayscale(1) brightness(0%)`)
     }
   }
@@ -210,7 +210,7 @@ export class VerticalIcons extends Plugin {
 
   onThemeChanged (themeType) {
     const invert = themeType === 'dark' ? 1 : 0
-    const active = this.view.querySelector(`.${css.active}`)
+    const active = this.view.querySelector(`.active`)
     if (active) {
       let image = active.querySelector('.image')
       image.style.setProperty('filter', `invert(${invert})`)

src/app/tabs/styles/run-tab-styles.js

@@ -2,7 +2,6 @@ var csjs = require('csjs-inject')
 
 var css = csjs`
   .runTabView {
-    padding: 2%;
     display: flex;
     flex-direction: column;
   }

src/app/udapp/run-tab.js

@@ -74,7 +74,7 @@ export class RunTab extends LibraryPlugin {
   }
 
   renderContainer () {
-    this.container = yo`<div class="${css.runTabView} p-3" id="runTabView" ></div>`
+    this.container = yo`<div class="${css.runTabView} py-0 px-3" id="runTabView" ></div>`
 
     var el = yo`
     <div class="list-group list-group-flush">

src/lib/panels-resize.js

@@ -3,7 +3,7 @@ const csjs = require('csjs-inject')
 
 const css = csjs`
   .dragbar            {
-    width             : 0.5em;
+    width             : 4px;
     height            : 100%;
     cursor            : col-resize;
     z-index           : 999;