last corrections of UI

apps/remix-ide/src/app/files/file-explorer.js

@@ -636,7 +636,7 @@ fileExplorer.prototype.renderMenuItems = function () {
           <label
             id=${action}
             data-id="fileExplorerUploadFile${action}"
-            class="${icon} ${css.newFile}"
+            class="${icon} mb-0 ${css.newFile}"
             title="${title}"
           >
             <input id="fileUpload" data-id="fileExplorerFileUpload" type="file" onchange=${(event) => {
@@ -647,13 +647,14 @@ fileExplorer.prototype.renderMenuItems = function () {
         `
       } else {
         return yo`
-        <span
+          <span
-          id=${action}
+            id=${action}
-          data-id="fileExplorerNewFile${action}"
+            data-id="fileExplorerNewFile${action}"
-          onclick=${(event) => { event.stopPropagation(); this[ action ]() }}
+            onclick=${(event) => { event.stopPropagation(); this[ action ]() }}
-          class="newFile ${icon} ${css.newFile}"
+            class="newFile ${icon} ${css.newFile}"
-          title=${title}>
+            title=${title}
-        </span>
+          >
+          </span>
         `
       }
     })

apps/remix-ide/src/app/tabs/debugger/debuggerUI/vmDebugger/CodeListView.js

@@ -44,9 +44,6 @@ CodeListView.prototype.indexChanged = function (index) {
   this.itemSelected.style.setProperty('border-color', 'var(--primary)')
   this.itemSelected.style.setProperty('border-style', 'solid')
   this.itemSelected.setAttribute('selected', 'selected')
-  if (this.itemSelected.firstChild) {
-    //this.itemSelected.firstChild.setAttribute('style', 'margin-left: 2px')
-  }
   codeView.scrollTop = this.itemSelected.offsetTop - parseInt(codeView.offsetTop)
 }
 

apps/remix-ide/src/app/tabs/debugger/debuggerUI/vmDebugger/StepDetail.js

@@ -2,7 +2,8 @@ var yo = require('yo-yo')
 var DropdownPanel = require('./DropdownPanel')
 
 function StepDetail () {
-  this.basicPanel = new DropdownPanel('Step detail', {json: true, displayContentOnly: true})
+  this.basicPanel = new DropdownPanel('Step details', {json: true, displayContentOnly: false})
+  this.basicPanel.show()
   this.detail = { 'vm trace step': '-', 'execution step': '-', 'add memory': '', 'gas': '', 'remaining gas': '-', 'loaded address': '-' }
 }
 

apps/remix-ide/src/app/ui/TreeView.js

@@ -28,10 +28,11 @@ var css = csjs`
   }
   .label_key {
     min-width: 15%;
-    word-break: break-all;
+    max-width: 80%;
+    word-break: break-word;
   }
   .label_value {
-    min-width: 30%;
+    min-width: 10%;
   }
 `
 
@@ -89,7 +90,7 @@ class TreeView {
     var label = yo`
       <div key=${keyPath} data-id="treeViewDiv${keyPath}" class="d-flex flex-row align-items-center">
         ${caret}
-        <span>${self.formatSelf(key, data, li)}</span>
+        <span class="w-100">${self.formatSelf(key, data, li)}</span>
       </div>`
     const expanded = self.expandPath.includes(keyPath)
     li.appendChild(label)
@@ -169,8 +170,8 @@ class TreeView {
 
   formatSelfDefault (key, data) {
     return yo`
-      <div class="d-flex flex-row ${css.label_item}">
+      <div class="d-flex mb-1 flex-row ${css.label_item}">
-        <label class="font-weight-bold pr-1 ${css.label_key}">${key}:</label> 
+        <label class="small font-weight-bold pr-1 ${css.label_key}">${key}:</label> 
         <label class="m-0 ${css.label_value}">${data.self}</label>
       </div>
     `