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 id='contacts'></div>
+          <div class='gutter'>
+              <div class='conversations scrollable'></div>
               <span class='fab'></span>
           </div>
         </script>
@@ -52,24 +52,26 @@
               <button class='back'></button>
               <span class='title-text'>New Message</span>
             </div>
-            <div id='gutter' class='gutter'>
-              <div class='new-group-update-form clearfix'>
-                <div class='group-avatar'>
-                  <div class='paperclip'></div>
-                  <input type='file' name='avatar' class='file-input'>
+            <div class='gutter'>
+              <div class='scrollable'>
+                <div class='new-group-update-form clearfix'>
+                  <div class='group-avatar'>
+                    <div class='paperclip'></div>
+                    <input type='file' name='avatar' class='file-input'>
+                  </div>
+                  <input type='text' name='name' class='name' placeholder='Group Name' value="{{ name }}">
+                </div>
+                <div class='recipients-container'>
+                  <span class='recipients'></span>
+                  <input type='text' class='new-message' placeholder="Name or phone number" />
+                </div>
+                <div class='buttons'>
+                  <button class='create'>Next</button>
+                </div>
+                <div class='results'>
+                  <div class='new-contact contact'></div>
+                  <div class='contacts'></div>
                 </div>
-                <input type='text' name='name' class='name' placeholder='Group Name' value="{{ name }}">
-              </div>
-              <div class='recipients-container'>
-                <span class='recipients'></span>
-                <input type='text' class='new-message' placeholder="Name or phone number" />
-              </div>
-              <div class='buttons'>
-                <button class='create'>Next</button>
-              </div>
-              <div class='results'>
-                <div class='new-contact contact'></div>
-                <div class='contacts'></div>
               </div>
             </div>
         </script>

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 {