Fix 'panel scrolling when selecting text' bug

Author: Maluen

css/panel.css

@@ -32,6 +32,7 @@ body {
 .mainTabs {
     height: 100%;
     margin-right: 0 !important;
+    margin-bottom: 0;
 }
 
 /* Turns dropdown into dropright for left-aligned nav-tabs */
@@ -50,14 +51,18 @@ body {
 
 .mainTabsContent>.tab-pane {
     height: 100%;
-    overflow-y: auto;    
+    overflow-y: auto;
     display: block !important; /* prevents render on tab change */
     position: absolute;
     width: 100%;
 }
 .mainTabsContent>.tab-pane>div { /* the actual tab content */
     /* By setting the padding here, the increasing of .tab-pane size is avoided */
-    padding: 5px 15px 0 15px;
+    padding: 5px 15px 15px 15px;
+}
+
+.appComponentList {
+    margin: 0;
 }
 
 .appComponentList>li {

js/panel/views/main/DebuggerView.js

@@ -37,10 +37,10 @@ function(Backbone, _, $, Handlebars, template,
 
                     // Fix scroll alignment bug on devtools resizing:
                     // by absolute positioning the tab contents, the contents size change
-                    // doesn't affect the position of those below them.
+                    // doesn't affect the position of the siblings.
                     // NOTE: the distance between the contents should be greater than the maximum
-                    // devtools height (i.e. the screen height) or the contents may overlap
-                    componentsViewElWrapper.css("top", tabIndex*1000+"em");
+                    // devtools width (i.e. the screen width) or the contents may overlap
+                    componentsViewElWrapper.css("left", tabIndex*1000+"em");
                     tabIndex++;
                 }
             }
@@ -57,8 +57,8 @@ function(Backbone, _, $, Handlebars, template,
 
             // display tab content
             var tabsContentContainer = this.$('.mainTabsContent');
-            tabsContentContainer.scrollTop(tabsContentContainer.scrollTop() +
-                                           tabContentElement.position().top);
+            tabsContentContainer.scrollLeft(tabsContentContainer.scrollLeft() +
+                                           tabContentElement.position().left);
         },
 
         events: {