resolve conflict in toolbar

embark-ui/src/components/ContractLogger.js

@@ -74,7 +74,7 @@ class ContractLogger extends React.Component {
               <FormGroup>
                 <Label htmlFor="events">Events</Label>
                 <Input type="select" name="events" id="events" onChange={(event) => this.updateState('eveny', event.target.value)} value={this.state.event}>
-                  <option value=""></option>
+                  <option value=""/>
                   {this.getEvents().map((event, index) => <option value={event.name} key={index}>{event.name}</option>)}
                 </Input>
               </FormGroup>
@@ -103,7 +103,7 @@ class ContractLogger extends React.Component {
           </Row>
         </Form>
         <Row>
-          <Col>
+          <Col className="overflow-auto">
             <Table>
               <thead>
                 <tr>

embark-ui/src/components/TextEditorToolbar.js

@@ -36,13 +36,13 @@ class TextEditorToolbar extends Component {
             {this.props.isContract &&
               <React.Fragment>
                 <NavLink className={classnames('btn', { active: this.isActiveTab(TextEditorToolbarTabs.Overview)})} onClick={() => this.props.openAsideTab(TextEditorToolbarTabs.Overview)}>
-                  <FontAwesomeIcon className="mr-2" name="info-circle" /> Overview
+                  <FontAwesomeIcon className="mr-2" name="bolt" /> Interact
                 </NavLink>
                 <NavLink className={classnames('btn', { active: this.isActiveTab(TextEditorToolbarTabs.Detail)})} href="#" onClick={() => this.props.openAsideTab(TextEditorToolbarTabs.Detail)}>
-                  <FontAwesomeIcon className="mr-2" name="file-text-o" /> Details
+                  <FontAwesomeIcon className="mr-2" name="info-circle" /> Details
                 </NavLink>
                 <NavLink className={classnames('btn', { active: this.isActiveTab(TextEditorToolbarTabs.Logger)})} href="#" onClick={() => this.props.openAsideTab(TextEditorToolbarTabs.Logger)}>
-                  <FontAwesomeIcon className="mr-2" name="file-text-o" /> Logger
+                  <FontAwesomeIcon className="mr-2" name="list-alt" /> Logger</NavLink>
                 </NavLink>
                 <NavLink className={classnames('btn', { active: this.isActiveTab(TextEditorToolbarTabs.Debugger)})} href="#" onClick={() => this.props.openAsideTab(TextEditorToolbarTabs.Debugger)}>
                   <FontAwesomeIcon className="mr-2" name="bug" /> Debugger
@@ -50,7 +50,7 @@ class TextEditorToolbar extends Component {
               </React.Fragment>
             }
             <NavLink className={classnames('btn', { active: this.isActiveTab(TextEditorToolbarTabs.Browser)})} href="#" onClick={() => this.props.openAsideTab(TextEditorToolbarTabs.Browser)}>
-              <FontAwesomeIcon className="mr-2" name="compass" /> Browser
+              <FontAwesomeIcon className="mr-2" name="internet-explorer" /> Preview
             </NavLink>
           </Nav>
 

embark-ui/src/containers/EditorContainer.css

@@ -22,7 +22,8 @@
   left: 0;
   right: 0;
   bottom: 0;
-  overflow: auto;
+  overflow-x: hidden;
+  overflow-y: auto;
 }
 
 .contract-function-container .card-header.closed {

embark-ui/src/containers/TextEditorAsideContainer.js

@@ -38,7 +38,7 @@ class TextEditorAsideContainer extends Component {
         return (
           <React.Fragment>
             <h2>{contract.className} - Transactions</h2>
-            <ContractLoggerContainer key={index} contract={contract}/>)
+            <ContractLoggerContainer key={index} contract={contract}/>
           </React.Fragment>
         );
       case 'overview':

embark-ui/src/index.css

@@ -22,6 +22,10 @@
   position: relative;
 }
 
+.overflow-auto {
+  overflow: auto;
+}
+
 .react-json-view {
   border-radius: .25rem;
 }