do not refer to file content as pre, just as an element having .content className

debomatic-webui/public/javascripts/page_distribution.js

@@ -361,7 +361,7 @@ function Page_Distrubion(socket) {
     var file = {
         set: function (socket_data) {
             var new_content = Utils.escape_html(socket_data.file.content);
-            var file_content = $('#file pre');
+            var file_content = $('#file .content');
             view.file = Utils.clone(socket_data.file);
             file_content.html(new_content);
             file_content.show();
@@ -369,11 +369,11 @@ function Page_Distrubion(socket) {
                 file_content.scrollTop(file_content[0].scrollHeight);
         },
         clean: function () {
-            $('#file pre').html('');
+            $('#file .content').html('');
             $('#file').hide();
         },
         append: function (new_content) {
-            var file_content = $('#file pre');
+            var file_content = $('#file .content');
             new_content = Utils.escape_html(new_content);
             if (!current_file_in_preview) {
                 file_content.append(new_content);
@@ -407,7 +407,7 @@ function Page_Distrubion(socket) {
                 query_data.file.content = null;
                 query_data.file.force = force;
                 // get a feedback to user while downloading file
-                $('#file pre').html('Downloading file, please wait a while ...');
+                $('#file .content').html('Downloading file, please wait a while ...');
                 $('#file').show();
                 debug_socket('emit', _e.file, query_data);
                 socket.emit(_e.file, query_data);
@@ -419,9 +419,9 @@ function Page_Distrubion(socket) {
             }
             debug(2, "file set preview", preview);
             current_file_in_preview = preview;
-            var file = $('#file pre');
+            var file = $('#file .content');
             if (preview) {
-                $('#file pre').addClass('preview');
+                $('#file .content').addClass('preview');
                 var height = (config.file.num_lines) *
                     parseInt(file.css('line-height').replace(/[^-\d\.]/g, '')) +
                     parseInt(file.css('padding-top').replace(/[^-\d\.]/g, '')) +
@@ -590,9 +590,9 @@ function Page_Distrubion(socket) {
             $('#sticky-package').addClass('on-top');
         }
         if (!config.preferences.file_background) {
-            $('#file pre').addClass('no-background');
+            $('#file .content').addClass('no-background');
         }
-        $('#file pre').css('font-size', config.preferences.file_fontsize);
+        $('#file .content').css('font-size', config.preferences.file_fontsize);
     };
 
     var select = function () {

debomatic-webui/public/stylesheets/style.css

@@ -166,7 +166,7 @@ footer .info {
   line-height: 35px;
 }
 
-#file pre {
+#file .content {
   white-space: pre-wrap;
   word-break: break-word;
 }
@@ -186,7 +186,7 @@ footer .info {
   font-size: 75%;
 }
 
-#file pre.preview {
+#file .preview {
   overflow:hidden;
 }
 

debomatic-webui/views/distribution.ejs

@@ -71,7 +71,7 @@
     <div id="welcome"></div>
     <div id="file">
       <div class="datestamp"></div>
-      <pre></pre>
+      <pre class="content"></pre>
       <div id="fileOffset"></div>
     </div>
   </section>