fixing word breaking

apps/remix-ide/src/app/panels/file-panel.js

@@ -64,7 +64,7 @@ module.exports = class Filepanel extends ViewPlugin {
 
     const explorers = yo`
       <div>
-        <div class=${css.treeview} data-id="filePanelFileExplorerTree">${fileExplorer.init()}</div>
+        <div class="pl-2 ${css.treeview}" data-id="filePanelFileExplorerTree">${fileExplorer.init()}</div>
         <div class="filesystemexplorer ${css.treeview}">${fileSystemExplorer.init()}</div>
       </div>
     `

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

@@ -43,7 +43,7 @@ class Slider {
   render () {
     var self = this
     var view = yo`<div>
-        <input id='slider' data-id="slider" class='w-100 my-2' type='range' min=0 max=${this.max} value=0
+        <input id='slider' data-id="slider" class='w-100 my-0' type='range' min=0 max=${this.max} value=0
           onchange=${function () { self.onChange() }} oninput=${function () { self.onChange() }} disabled=${this.disabled} />
       </div>`
     if (!this.view) {

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

@@ -1,5 +1,4 @@
 'use strict'
-var csjs = require('csjs-inject')
 var yo = require('yo-yo')
 
 var CodeListView = require('./vmDebugger/CodeListView')
@@ -126,19 +125,18 @@ function VmDebugger (vmDebuggerLogic) {
 
 VmDebugger.prototype.renderHead = function () {
   this.solidityPanel = yo`
-    <div class="column w-100" hidden>
+    <div class="w-100" hidden>
       ${this.functionPanel.render()}
       ${this.solidityLocals.render()}
       ${this.solidityState.render()}
     </div>
   `
-  // style here is a temprorary solution. Ui should be refactored
   const headView = yo`
-    <div id="vmheadView" class="mt-1 pr-1" style="padding-left: 7px;">
-      <div class="row px-1">
+    <div id="vmheadView" class="mt-1 px-0">
+      <div class="d-flex flex-column">
         ${this.solidityPanel}
-        <div class="column w-100">${this.asmCode.render()}</div>
-        <div class="column w-100">${this.stepDetail.render()}</div>
+        <div class="w-100">${this.asmCode.render()}</div>
+        <div class="w-100">${this.stepDetail.render()}</div>
       </div>
     </div>
   `
@@ -155,7 +153,7 @@ VmDebugger.prototype.remove = function () {
 
 VmDebugger.prototype.render = function () {
   const view = yo`
-    <div id="vmdebugger" class="pl-1">
+    <div id="vmdebugger" class="px-2">
       <div>
         ${this.stackPanel.render()}
         ${this.memoryPanel.render()}

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

@@ -41,11 +41,11 @@ CodeListView.prototype.indexChanged = function (index) {
   }
   let codeView = this.view.querySelector('#asmitems')
   this.itemSelected = codeView.children[index]
-  this.itemSelected.style.setProperty('background-color', 'var(--info)')
-  this.itemSelected.style.setProperty('color', 'var(--light)')
+  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')
+    //this.itemSelected.firstChild.setAttribute('style', 'margin-left: 2px')
   }
   codeView.scrollTop = this.itemSelected.offsetTop - parseInt(codeView.offsetTop)
 }
@@ -67,9 +67,9 @@ CodeListView.prototype.changed = function (code, address, index) {
 CodeListView.prototype.renderAssemblyItems = function () {
   if (this.code) {
     var codeView = this.code.map(function (item, i) {
-      return yo`<div key=${i} value=${i}><span>${item}</span></div>`
+      return yo`<div class="px-1" key=${i} value=${i}><span>${item}</span></div>`
     })
-    return yo`<div class="pl-3 my-2 small ${css.instructions}" id='asmitems' ref='itemsList'>
+    return yo`<div class="pl-2 my-1 small ${css.instructions}" id='asmitems' ref='itemsList'>
       ${codeView}
     </div>`
   }

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

@@ -122,7 +122,7 @@ DropdownPanel.prototype.render = function (overridestyle, node) {
       <div class='message' style='display:none'></div>
     </div>`
   var view = yo`
-    <div class="border rounded p-1 m-1 bg-light">
+    <div class="border rounded px-1 mt-1 bg-light">
     <style>
       @-moz-keyframes spin {
         to { -moz-transform: rotate(359deg); }

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

@@ -12,7 +12,7 @@ function formatSelf (key, data) {
   if (data.type === 'string') {
     data.self = JSON.stringify(data.self)
   }
-  return yo `<label style='${keyStyle};white-space:pre-wrap;'> ${' ' + key}:<label style=${style}>${' ' + data.self}</label><label style='font-style:italic'> ${data.isProperty || !data.type ? '' : ' ' + data.type}</label></label>`
+  return yo `<label class="mb-0" style='${keyStyle};white-space:pre-wrap;'> ${' ' + key}:<label class="mb-0" style=${style}>${' ' + data.self}</label><label style='font-style:italic'> ${data.isProperty || !data.type ? '' : ' ' + data.type}</label></label>`
 }
 
 function extractData (item, parent, key) {

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

@@ -21,12 +21,17 @@ var css = csjs`
   .caret_tv {
     width: 10px;
     flex-shrink: 0;
+    padding-right: 5px;
   }
-  .label_tv {
-    align-items: center;
+  .label_item {
+    word-break: break-all;
   }
-  .label_tv>span {
-    word-break: break-word;
+  .label_key {
+    min-width: 15%;
+    word-break: break-all;
+  }
+  .label_value {
+    min-width: 30%;
   }
 `
 
@@ -74,7 +79,7 @@ class TreeView {
     var children = Object.keys(json).map((innerkey) => {
       return this.renderObject(json[innerkey], json, innerkey, expand, innerkey)
     })
-    return yo`<ul key=${key} data-id="treeViewUl${key}" class="${css.ul_tv} px-2">${children}</ul>`
+    return yo`<ul key=${key} data-id="treeViewUl${key}" class="${css.ul_tv} ml-0 pr-2">${children}</ul>`
   }
 
   formatData (key, data, children, expand, keyPath) {
@@ -82,7 +87,7 @@ class TreeView {
     var li = yo`<li key=${keyPath} data-id="treeViewLi${keyPath}" class=${css.li_tv}></li>`
     var caret = yo`<div class="fas fa-caret-right caret ${css.caret_tv}"></div>`
     var label = yo`
-      <div key=${keyPath} data-id="treeViewDiv${keyPath}" class=${css.label_tv}>
+      <div key=${keyPath} data-id="treeViewDiv${keyPath}" class="d-flex flex-row align-items-center">
         ${caret}
         <span>${self.formatSelf(key, data, li)}</span>
       </div>`
@@ -163,7 +168,12 @@ class TreeView {
   }
 
   formatSelfDefault (key, data) {
-    return yo`<label>${key}: ${data.self}</label>`
+    return yo`
+      <div class="d-flex flex-row ${css.label_item}">
+        <label class="font-weight-bold pr-1 ${css.label_key}">${key}:</label> 
+        <label class="m-0 ${css.label_value}">${data.self}</label>
+      </div>
+    `
   }
 
   extractDataDefault (item, parent, key) {