Fix up contact list height off by 4px

Add some variables so we can actually compute this height instead of
hard coding it.

// FREEBIE

stylesheets/_index.scss

@@ -20,7 +20,7 @@
   width: 300px;
   .content {
     background-color: $grey_l;
-    height: calc(100% - 104px);
+    height: calc(100% - #{$header-height} - #{$search-height});
   }
 
   .conversations {
@@ -90,7 +90,7 @@ input.search {
   padding: 0;
   margin: 0;
   outline: 0;
-  height: 36px;
+  height: $search-height;
   width: 100%;
   padding: 10px;
   border: solid 1px $grey_l;

stylesheets/_variables.scss

@@ -33,6 +33,8 @@ $header-height: 64px;
 $button-height: 24px;
 $header-color: $blue;
 
+$search-height: 36px;
+
 $unread-badge-size: 21px;
 $loading-height: 16px;
 

stylesheets/manifest.css

@@ -479,7 +479,7 @@ input[type=text]:active, input[type=text]:focus, input[type=search]:active, inpu
   width: 300px; }
   .gutter .content {
     background-color: #f3f3f3;
-    height: calc(100% - 104px); }
+    height: calc(100% - 64px - 36px); }
   .gutter .conversations {
     overflow-y: scroll;
     height: 100%;