Wrap the message content in a pre-scrollable to make sure it doesn't obliterate the screen real estate

build.gradle

@@ -8,7 +8,7 @@ plugins {
 apply plugin: 'groovy'
 ////////////////////////////////////////////////////////////////////////////////
 
-
+version = '0.1.0'
 group = 'offtopic'
 description =' Offtopic is a simple web application built with Ratpack for inspecting and consuming events from Kafka.'
 sourceCompatibility = '1.7'

src/ratpack/public/css/offtopic.css

@@ -14,3 +14,6 @@ body {
     margin-left: 3px;
     margin-right: 3px;
 }
+
+.message-raw {
+}

src/ratpack/public/js/ws.js

@@ -17,7 +17,8 @@ function watchTopic(name) {
                 var el_id = Math.floor(Math.random() * 1000000);
                 var el = ["<div id='" + el_id + "' class='list-group-item'>",
                           "<code>" + data.topic + "</code>",
-                          data.raw + "<br/><div id='" +  el_id + "_b64'",
+                          '<pre class="pre-scrollable message-raw">' + data.raw + '</pre>',
+                          "<br/><div class='message-b64' id='" +  el_id + "_b64'",
                           "style='display:none;'><pre>" + data.b64 + "</pre></div>"].join("\n");
                 messages.prepend(el);
                 $("#" + el_id).click(function(ev) {