tuned the style of the compile tab1

src/app/tabs/compile-tab.js

@@ -234,11 +234,11 @@ class CompileTab extends ViewPlugin {
     let result = contractList.length
     ? yo`<section class="${css.container} clearfix">
       <!-- Select Compiler Version -->
-      <div class="navbar navbar-light bg-light input-group mb-3">
+      <div class="navbar navbar-light bg-light input-group p-2 mb-3">
         <label class="border-0 input-group-text" for="compiledContracts">Contract</label>
         ${selectEl}
       </div>
-      <article class="${css.compilerArticle}">
+      <article class="px-2 mt-2 pb-0">
         <button class="btn btn-secondary btn-block" title="Publish on Swarm" onclick="${() => { this.publish('swarm') }}">
           <span>Publish on Swarm</span>
           <img id="swarmLogo" class="${css.storageLogo} ml-2" src="${swarmImg}">
@@ -267,8 +267,8 @@ class CompileTab extends ViewPlugin {
         </div>
       </article>
     </section>`
-    : yo`<section class="${css.container} clearfix"><article class="${css.compilerArticle}">
+    : yo`<section class="${css.container} clearfix"><article class="px-2 mt-2 pb-0 d-flex">
-      <span class="alert alert-warning" role="alert">No Contract Compiled Yet</span>
+      <span class="m-0 w-100 alert alert-warning" role="alert">No Contract Compiled Yet</span>
     </article></section>`
 
     if (contractList.length) {

src/app/tabs/compileTab/compilerContainer.js

@@ -105,7 +105,7 @@ class CompilerContainer {
     if (!name) name = ''
     var displayed = name === '' ? '<no file selected>' : name
     var el = yo`
-    <div class="${css.compilerArticle}">
+    <div class="px-2 mt-2 pb-0 d-flex">
       <button class="btn btn-primary btn-block ${name === '' ? 'disabled' : ''}" title="Compile" onclick="${this.compile.bind(this)}">
         <span>${this._view.compileIcon} Compile ${displayed}</span>
       </button>
@@ -210,7 +210,7 @@ class CompilerContainer {
               <div class="col-sm-4">
                 <div class="d-flex flex-row justify-content-end">
                   <label class="${css.compilerLabel} input-group-text pr-0 border-0 w-100" for="versionSelector">
-                    <button class="far fa-plus-square border-0 p-0 m-2 text-dark btn-sm" onclick=${this.loadCompiler.bind(this)} title="Add a custom compiler with URL"></button>
+                    <button class="far fa-plus-square border-0 p-0 m-2 text-dark btn-sm" onclick="${(e)=>this.loadCompiler(e)}" title="Add a custom compiler with URL"></button>
                     Compiler
                   </label>
                 </div>
@@ -243,7 +243,7 @@ class CompilerContainer {
           ${this._view.compilationButton}
         </article>
         <!-- Config -->
-        <article>
+        <article class="p-2">
           <small class="${css.compilerSm}">Compiler Configuration</small>
           <ul class="list-group list-group-flush">
             <li class="list-group-item form-group ${css.compilerConfig}">
@@ -270,9 +270,7 @@ class CompilerContainer {
       'Add a custom compiler',
       'URL',
       '',
-      (url) => {
+      (url) => this.addCustomCompiler(url)
-        this.addCustomCompiler(url)
-      }
     )
   }
 

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

@@ -1,9 +1,6 @@
 const csjs = require('csjs-inject')
 
 const css = csjs`
-  .compilerArticle {
-    padding: 10px;
-  }
   .title {
     font-size: 1.1em;
     font-weight: bold;