Horizontally scroll code blocks instead of wrapping

app/assets/stylesheets/framework/files.scss

@@ -20,6 +20,7 @@
     margin: 0;
     text-align: left;
     padding: 10px $gl-padding;
+    word-break: break-word;
 
     .file-actions {
       float: right;

app/assets/stylesheets/framework/markdown_area.scss

@@ -84,6 +84,7 @@
 .md-preview-holder {
   min-height: 167px;
   padding: 10px 0;
+  overflow-x: auto;
 }
 
 .markdown-area {

app/assets/stylesheets/framework/typography.scss

@@ -16,9 +16,8 @@
 
   code {
     font-family: $monospace_font;
-    white-space: pre-wrap;
+    white-space: pre;
     word-wrap: normal;
-    word-break: break-word;
   }
 
   kbd {

app/assets/stylesheets/pages/detail_page.scss

@@ -33,8 +33,12 @@
   .description {
     margin-top: 6px;
 
-    p:last-child {
-      margin-bottom: 0;
+    p {
+      overflow-x: auto;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
     }
   }
 }

app/assets/stylesheets/pages/diff.scss

@@ -59,10 +59,15 @@
       border-collapse: separate;
       margin: 0;
       padding: 0;
+
       .line_holder td {
         line-height: $code_line_height;
         font-size: $code_font_size;
       }
+
+      td {
+        white-space: nowrap;
+      }
     }
 
     tr.line_holder.parallel {

app/assets/stylesheets/pages/notes.scss

@@ -82,7 +82,7 @@ ul.notes {
         // On diffs code should wrap nicely and not overflow
         pre {
           code {
-            white-space: pre-wrap;
+            white-space: pre;
           }
         }