making contact list scrollable

css/base.css

@@ -119,9 +119,21 @@ html, body {
   margin-left: 1em;
 }
 
+.contactBox {
+  overflow: hidden;
+}
+
+#newTopicInput {
+  z-index: 3;
+  background-color: #FFF;
+  padding-bottom: 0.25em;
+}
+
 .contactList {
-  padding: 0.5em;
+  z-index: 1;
-  height: 85vh;
+  padding: 9.5em 0.5em 0.5em 0.5em;
+  margin-top: -9em;
+  height: 100vh;
   overflow-y: scroll;
 }
 
@@ -165,7 +177,7 @@ html, body {
 }
 
 #chatTitle {
-  z-index: 2;
+  z-index: 3;
   position: absolute;
   left: 0;
   right: 0;
@@ -207,7 +219,6 @@ html, body {
 .chatBox > li {
   margin-bottom: 1em;
   position: relative;
-  x-white-space: pre;
 }
 
 .chatBox > li:before,

index.html

@@ -303,7 +303,7 @@
     var NewTopic = React.createClass({
       render: function() {
         return (
-          <div className="input-group">
+          <div className="input-group" id="newTopicInput">
             <label htmlFor="addTopic" className="sr-only">Add user or topic</label>
             <input id="addTopic" className="form-control" type="text" placeholder="Add topic" />
             <span className="input-group-btn"><button className="btn btn-default" type="button">