DRY up scrollable pattern

Switch to using gutter class instead of id since there is potentially
more than one usage on the page.

index.html

@@ -17,8 +17,8 @@
           <div class='title-bar' id='header'>
             <div class='socket-status'></div>
           </div>
-          <div id='gutter' class='gutter'>
+          <div class='gutter'>
-              <div id='contacts'></div>
+              <div class='conversations scrollable'></div>
               <span class='fab'></span>
           </div>
         </script>
@@ -52,7 +52,8 @@
               <button class='back'></button>
               <span class='title-text'>New Message</span>
             </div>
-            <div id='gutter' class='gutter'>
+            <div class='gutter'>
+              <div class='scrollable'>
                 <div class='new-group-update-form clearfix'>
                   <div class='group-avatar'>
                     <div class='paperclip'></div>
@@ -72,6 +73,7 @@
                   <div class='contacts'></div>
                 </div>
               </div>
+            </div>
         </script>
         <script type='text/x-tmpl-mustache' id='attachment-preview'>
               <img src="{{ source }}" class="preview" />

js/views/inbox_view.js

@@ -55,6 +55,7 @@
 
     Whisper.InboxView = Whisper.View.extend({
         template: $('#inbox').html(),
+        className: 'inbox',
         initialize: function () {
             this.render();
 
@@ -64,7 +65,7 @@
                 this.openConversation.bind(this, null));
 
             this.inbox = new Whisper.ConversationListView({
-                el         : this.$el.find('#contacts'),
+                el         : this.$el.find('.conversations'),
                 collection : bg.inbox
             }).render();
 

stylesheets/_index.scss

@@ -2,10 +2,11 @@
   padding: $header-height 0 0;
 }
 
-.gutter, #contacts {
+.new-conversation, .inbox, .gutter {
   height: 100%;
 }
-#contacts {
+.scrollable {
+  height: 100%;
   overflow: auto;
 }
 

stylesheets/manifest.css

@@ -137,10 +137,11 @@ button.back {
 .gutter {
   padding: 36px 0 0; }
 
-.gutter, #contacts {
+.new-conversation, .inbox, .gutter {
   height: 100%; }
 
-#contacts {
+.scrollable {
+  height: 100%;
   overflow: auto; }
 
 .socket-status {