Merge pull request #738 from ethereum/fixScrollFileExplorer

assets/css/browser-solidity.css

@@ -67,7 +67,7 @@
     border-bottom: 3px solid hsla(229, 100%, 97%, 1); /* backgroundBlue in style-guide.js*/
     height: 2em;
     font-size: 1em;
-    padding-top: 0.5em;
+    margin-top: 0.5em;
     box-sizing: content-box;
     display: flex;
 }

src/app/panels/editor-panel.js

@@ -16,6 +16,8 @@ var css = csjs`
   .tabsbar             {
     display            : flex;
     overflow           : hidden;
+    height             : 2em;
+    margin-top         : 0.5em;
   }
   .tabs               {
     position          : relative;
@@ -34,12 +36,13 @@ var css = csjs`
     height            : 2.5em;
     box-sizing        : border-box;
     line-height       : 2em;
-    padding           : 0.5em 0 0;
     top               : 0;
     border-bottom     : 0 none;
   }
   .changeeditorfontsize {
     margin            : 0;
+    font-size         : 9px;
+    margin-top        : 0.5em;
   }
   .changeeditorfontsize i {
     cursor            : pointer;
@@ -77,14 +80,11 @@ var css = csjs`
     z-index           : 999;
     text-align        : center;
     cursor            : pointer;
-    padding           : 0 0.9em;
     vertical-align    : middle;
     background-color  : ${styles.colors.white};
     height            : 100%;
     font-size         : 1.3em;
-  }
-  .scroller i         {
-    line-height       : 3em;
+    color             : orange;
   }
   .scrollerright      {
     right             : 0;
@@ -95,7 +95,6 @@ var css = csjs`
   }
   .toggleRHP          {
     margin-top        : 0.5em;
-    padding           : 0.6em;
     font-weight       : bold;
     color             : ${styles.colors.black};
     right             : 0;

src/app/panels/file-panel.js

@@ -33,8 +33,9 @@ var css = csjs`
     width             : 100%;
   }
   .menu               {
-    display           : flex;
-    flex-direction    : row;
+    height            : 2em;
+    margin-top        : 0.5em;
+    flex-shrink       : 0;
   }
   .newFile            {
     padding           : 10px;
@@ -84,6 +85,9 @@ var css = csjs`
   .treeview {
     background-color  : ${styles.colors.white};
   }
+  .treeviews {
+    overflow-y        : auto;
+  }
   .dragbar            {
     position          : absolute;
     top               : 37px;
@@ -151,9 +155,11 @@ function filepanel (appAPI, filesProvider) {
               <i class="websocketconn fa fa-link" title="Connect to Localhost"></i>
             </span>
           </div>
+          <div class=${css.treeviews}>
             <div class=${css.treeview}>${fileExplorer.init()}</div>
             <div class="filesystemexplorer ${css.treeview}"></div>
           </div>
+        </div>
         ${dragbar}
       </div>
     `