notes list scroll css fix

app/assets/javascripts/app/services/directives/functional/infiniteScroll.js

@@ -2,8 +2,8 @@ angular.module('app.frontend').directive('infiniteScroll', [
 '$rootScope', '$window', '$timeout', function($rootScope, $window, $timeout) {
   return {
     link: function(scope, elem, attrs) {
-      elem.css('overflow-x', 'hidden');
-      elem.css('height', 'inherit');
+      // elem.css('overflow-x', 'hidden');
+      // elem.css('height', 'inherit');
 
       var offset = parseInt(attrs.threshold) || 0;
       var e = elem[0]

app/assets/stylesheets/app/_main.scss

@@ -145,12 +145,17 @@ $section-header-height: 70px;
     height: 100%;
     max-height: calc(100vh - #{$header-height});
     float: left;
-    overflow-y: auto;
+    overflow-y: auto;;
     overflow-x: hidden;
     min-width: 0;
 
     font-size: 17px;
 
+    .scrollable {
+      overflow-y: auto;
+      overflow-x: hidden;
+    }
+
     > .content {
       height: 100%;
       max-height: 100%;

app/assets/stylesheets/app/_notes.scss

@@ -2,6 +2,8 @@
   width: 25%;
   border-left: 1px solid #dddddd;
   border-right: 1px solid #dddddd;
+  // overflow-y: hidden !important;
+  // height: calc(100vh - 130px) !important;
 
   .notes-title-bar {
     color: rgba(black, 0.40);
@@ -39,6 +41,15 @@
     }
   }
 
+  .scrollable {
+    height: calc(100vh - (130px + #{$header-height}));
+  }
+
+  .infinite-scroll {
+    overflow-x: hidden;
+    height: inherit;
+  }
+
   .note {
     width: 100%;
     padding: 15px;

app/assets/templates/frontend/notes.html.haml

@@ -18,7 +18,8 @@
               %li
                 %a.text{"ng-click" => "ctrl.selectedMenuItem(); ctrl.selectedTagDelete()"} Delete Tag
 
-    %div{"infinite-scroll" => "ctrl.paginate()", "can-load" => "true", "threshold" => "200"}
+    .scrollable
+      .infinite-scroll{"infinite-scroll" => "ctrl.paginate()", "can-load" => "true", "threshold" => "200"}
         .note{"ng-repeat" => "note in ctrl.tag.notes | limitTo:ctrl.notesToDisplay | filter: ctrl.filterNotes",
             "ng-click" => "ctrl.selectNote(note)", "ng-class" => "{'selected' : ctrl.selectedNote == note}"}
           .name{"ng-if" => "note.title"}