Merge branch 'notes-input' into 'master'

Wrap text in notes box if longer than code in diff

* Fixes branch name overflow
* Text and inline `code` wraps in comments
* `code` blocks scroll horizontally

![Screen_Shot_2016-04-11_at_4.59.15_PM](/uploads/39eee7d35ea79d1a3944aa6281b72121/Screen_Shot_2016-04-11_at_4.59.15_PM.png)

See merge request !3626

app/assets/stylesheets/pages/merge_requests.scss

@@ -142,6 +142,7 @@
   overflow: hidden;
   font-size: 90%;
   margin: 0 3px;
+  word-break: break-all;
 }
 
 .mr-list {

app/assets/stylesheets/pages/note_form.scss

@@ -71,12 +71,24 @@
         border-color: $focus-border-color;
       }
     }
+
+    p {
+      code {
+        white-space: normal;
+      }
+
+      pre {
+        code {
+          white-space: pre;
+        }
+      }
+    }
   }
 }
 
 .discussion-form {
   padding: $gl-padding-top $gl-padding;
-  background-color: #fff;
+  background-color: $white-light;
 }
 
 .note-edit-form {

app/assets/stylesheets/pages/notes.scss

@@ -81,11 +81,17 @@ ul.notes {
         @include md-typography;
 
         // On diffs code should wrap nicely and not overflow
+        p {
+          code {
+            white-space: normal;
+          }
+
           pre {
             code {
               white-space: pre;
             }
           }
+        }
 
         // Reset ul style types since we're nested inside a ul already
         & > ul {
@@ -112,6 +118,10 @@ ul.notes {
           margin: 10px 0;
         }
       }
+
+      a {
+        word-break: break-all;
+      }
     }
 
     .note-header {
@@ -127,7 +137,7 @@ ul.notes {
     margin-right: 10px;
   }
   .line_content {
-    white-space: pre-wrap;
+    white-space: pre;
   }
 }
 
@@ -145,19 +155,27 @@ ul.notes {
       background: $background-color;
       color: $text-color;
     }
+
     &.notes_line2 {
       text-align: center;
       padding: 10px 0;
       border-left: 1px solid #ddd !important;
     }
+
     &.notes_content {
-      background-color: #fff;
+      background-color: $background-color;
       border-width: 1px 0;
       padding: 0;
       vertical-align: top;
+      white-space: normal;
+
       &.parallel {
         border-width: 1px;
       }
+
+      .notes {
+        background-color: $white-light;
+      }
     }
   }
 }