my try for responsive design in the logviewer

gistfile1.diff

diff --git a/webapp/app/css/logviewer.css b/webapp/app/css/logviewer.css
index 1837759..e4d8582 100644
--- a/webapp/app/css/logviewer.css
+++ b/webapp/app/css/logviewer.css
@@ -1,6 +1,10 @@
 body {
-    white-space: nowrap;
-    float: left;
+    padding-top: 10px;
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    left: 0;
 }
 
 /*Log Viewer*/
@@ -20,14 +24,13 @@ body {
 }
 
 .lv-log-container {
-    height: auto;
+    height: 100%;
     width: 100%;
     overflow: auto;
-    right: 0px;
-    left: 0px;
-    bottom: 0px;
-    padding: 20px 20px 0px;
+    bottom: 0;
+    padding: 20px 20px 0;
     background: #EFEFEF;
+    white-space: nowrap;
 }
 
 .lv-log-line {
@@ -53,15 +56,13 @@ body {
 
 .run-data {
     width: 100%;
-    position: fixed;
-    top: 0px;
-    left: 0px;
     background-color: #FFF;
     padding: 20px 5px 4px;
+    display: table-row;
 }
 
 .run-data .steps-data {
-    height: 210px;
+    max-height: 210px;
     overflow: auto;
     border-color: #dddddd;
     border-width: 1px;
diff --git a/webapp/app/js/directives/log_viewer_infinite_scroll.js b/webapp/app/js/directives/log_viewer_infinite_scroll.js
index 9ae412b..4c2c90b 100644
--- a/webapp/app/js/directives/log_viewer_infinite_scroll.js
+++ b/webapp/app/js/directives/log_viewer_infinite_scroll.js
@@ -2,11 +2,12 @@
 
 treeherder.directive('lvInfiniteScroll', ['$timeout', '$parse', function ($timeout, $parse) {
     return function (scope, element, attr) {
+        console.log("loadMore");
         element.bind('scroll', function () {
             var raw = element[0];
             var sh = raw.scrollHeight;
             var onLoadMore = $parse(attr.onLoadMore);
-
+            console.log("loadMore", raw.scrollTop);
             if (raw.scrollTop <= 100) {
                 onLoadMore(scope, {bounds: {top: true}, element: raw}).then(function(haltScrollTop) {
                     if (!haltScrollTop) {
diff --git a/webapp/app/js/directives/log_viewer_steps.js b/webapp/app/js/directives/log_viewer_steps.js
index e8301b6..5c2a613 100644
--- a/webapp/app/js/directives/log_viewer_steps.js
+++ b/webapp/app/js/directives/log_viewer_steps.js
@@ -5,8 +5,8 @@ treeherder.directive('lvLogSteps', ['$timeout', '$parse', function ($timeout) {
         var el = $('.logviewer-step[order="' + order + '"]');
         var parentOffset = el.parent().offset();
 
-        return el.offset().top - 
-               parentOffset.top + el.parent().scrollTop() - 
+        return el.offset().top -
+               parentOffset.top + el.parent().scrollTop() -
                parseInt($('.steps-data').first().css('padding-bottom'));
     }
 
@@ -21,14 +21,9 @@ treeherder.directive('lvLogSteps', ['$timeout', '$parse', function ($timeout) {
 
                 scope.loadMore({}).then(function () {
                     $timeout(function () {
+                        var raw = $('.lv-log-container')[0];
                         var line = $('.lv-log-line[line="' + linenumber + '"]');
-
-                            // Animate to successfully scroll to the selected error
-                            if (line.offset() !== undefined) {
-                                $('html, body').animate({
-                                    scrollTop: line.offset().top - $('.run-data').outerHeight()
-                                }, 200);
-                            }
+                        raw.scrollTop += line.offset().top - $('.run-data').outerHeight() - 10 ;
                     });
                 });
 
@@ -60,14 +55,9 @@ treeherder.directive('lvLogSteps', ['$timeout', '$parse', function ($timeout) {
 
                 scope.loadMore({}).then(function () {
                     $timeout(function () {
+                        var raw = $('.lv-log-container')[0];
                         var line = $('.lv-log-line[line="' + step.started_linenumber + '"]');
-
-                        if (line.offset() !== undefined) {
-                            // Animate to successfully scroll to the selected error
-                            $('html, body').animate({
-                                scrollTop: line.offset().top - $('.run-data').outerHeight()
-                            }, 200);
-                        }
+                        raw.scrollTop += line.offset().top - $('.run-data').outerHeight() - 10;
                     });
                 });
             };