making contacts scrollable

css/base.css

@@ -11,77 +11,76 @@ html, body {
   width:100%;
 }
 
-/* Top-level layout style: sidebar + main view */
+/* Top-level layout style: sidepanel + main view */
 #mountPoint {
-    padding-left: 0;
-    transition: all 0.5s ease;
-    height: 100%;
+  padding-left: 0;
+  transition: all 0.5s ease;
+  height: 100%;
 }
 
 #mountPoint.toggled {
-    padding-left: 30em;
+  padding-left: 30em;
 }
 
-#sidebar-wrapper {
-    position: fixed;
-    left: 30em;
-    width: 0;
-    height: 100%;
-    margin-left: -30em;
-    overflow-y: auto;
-    transition: all 0.5s ease;
+#sidepanel-wrapper {
+  position: fixed;
+  left: 30em;
+  width: 0;
+  height: 100vh;
+  margin-left: -30em;
+  transition: all 0.5s ease;
 }
 
-#mountPoint.toggled #sidebar-wrapper {
-    width: 30em;
+#mountPoint.toggled #sidepanel-wrapper {
+  width: 30em;
 }
 
 #page-content-wrapper {
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    background-color: #CCF
+  width: 100%;
+  height: 100%;
+  position: absolute;
 }
 
 #mountPoint.toggled #page-content-wrapper {
-    position: absolute;
-    margin-right: -30em;
+  position: absolute;
+  margin-right: -30em;
 }
 
-.sidebar-nav {
-    position: absolute;
-    top: 0;
-    width: 30em;
-    margin: 0;
-    padding: 0;
+.sidepanel-nav {
+  position: absolute;
+  top: 0;
+  width: 30em;
+  margin: 0;
+  padding: 0;
+  x-height: 100%;
 }
 
 @media(min-width:768px) {
-    #mountPoint {
-        padding-left: 30em;
-    }
+  #mountPoint {
+    padding-left: 30em;
+  }
 
-    #mountPoint.toggled {
-        padding-left: 0;
-    }
+  #mountPoint.toggled {
+    padding-left: 0;
+  }
 
-    #sidebar-wrapper {
-        width: 30em;
-    }
+  #sidepanel-wrapper {
+    width: 30em;
+  }
 
-    #mountPoint.toggled #sidebar-wrapper {
-        width: 0;
-    }
+  #mountPoint.toggled #sidepanel-wrapper {
+    width: 0;
+  }
 
-    #page-content-wrapper {
-        position: relative;
-        height: 100%;
-    }
+  #page-content-wrapper {
+    position: relative;
+    height: 100%;
+  }
 
-    #mountPoint.toggled #page-content-wrapper {
-        position: relative;
-        margin-right: 0;
-    }
+  #mountPoint.toggled #page-content-wrapper {
+    position: relative;
+    margin-right: 0;
+  }
 }
 /* END of top-level layout */
 
@@ -122,6 +121,8 @@ html, body {
 
 .contactList {
   padding: 0.5em;
+  height: 85vh;
+  overflow-y: scroll;
 }
 
 .contactList li {
@@ -154,7 +155,7 @@ html, body {
 }
 
 .fullViewPort {
-  height: 98vh;
+  height: 99vh;
   overflow-y: hidden;
 }