Get overflow scrolls working

Had to resort to a resize event handler.
A bit slow at times, but it works.

js/popup.js

@@ -20,6 +20,23 @@ new Whisper.ConversationListView({el: $('#contacts')});
 new Whisper.Header({el: $('#header')});
 Whisper.Threads.fetch({reset: true});
 
+function resizer(e) {
+	var windowheight = window.innerHeight;
+	var form = $('.send-message-area').outerHeight();
+	var gutter_offset = $('#gutter').offset().top;
+	var contacts_offset = $('#contacts').offset().top;
+	if (window.innerWidth < 480) {
+		$('#gutter').css('height', windowheight - gutter_offset - form);
+		$('#contacts').css('height', windowheight - contacts_offset - form);
+	} else {
+		$('#gutter').css('height', windowheight - gutter_offset);
+		$('#contacts').css('height', windowheight - contacts_offset);
+	}
+	$('.discussion').css('height', windowheight - gutter_offset - form);
+}
+window.addEventListener('resize', resizer, false);
+resizer();
+
 textsecure.registerOnLoadFunction(function() {
 	if (textsecure.storage.getUnencrypted("number_id") === undefined) {
 		extension.navigator.tabs.create("options.html");

js/views/conversation_view.js

@@ -30,6 +30,7 @@ var Whisper = Whisper || {};
 
     render: function() {
       this.$el.show().insertAfter($('#gutter'));
+      resizer();
       return this;
     }
   });

stylesheets/index.css

@@ -3,3 +3,26 @@
 }
 
 #listener, #log { display: none; }
+
+.gutter {
+  padding-bottom: 0;
+  overflow: hidden;
+}
+
+#contacts {
+  overflow-y: scroll;
+}
+#contacts::-webkit-scrollbar {
+  display: none;
+}
+
+.conversation {
+  margin: 0;
+  padding: 0;
+}
+
+ul.discussion {
+  margin: 0;
+  padding: 10px;
+  box-sizing: border-box;
+}