Fix wrapping long code lines in UI (#5927)

Wrapping was initially added in #2789
but it is currently disabled because the rule that applies wrapping to
the wrap class did not have enough CSS specificity.

Resolved the issue by using a general selector that matches all code
boxes. The previous wrap class was removed because it had only been
inconsistenly applied to various code boxes and because I found no easy
way to add classes to code boxes rendered in Markdown.

Also removed a seemingly useless :before on code view and added padding
to restore the spacing.

Author: silverwind

public/css/index.css

@@ -27,26 +27,15 @@ pre, code {
         line-height: 1.5;
         overflow: auto;
     }
-    &.wrap {
-        white-space: pre-wrap;       /* CSS 3 */
-//      white-space: -moz-normal;    /* Mozilla, since 1999 */
-//      white-space: -normal;        /* Opera 4-6 */
-//      white-space: -o-normal;      /* Opera 7 */
-
-        -ms-word-break: break-all;
-        word-break: break-all;
-
-        /* These are technically the same, but use both */
-        overflow-wrap: break-word;
-        word-wrap: break-word;
-    }
+}
+/* Wrap long lines of code. This will also apply to Markdown code boxes. */
+pre > code {
+        white-space: pre-wrap !important;
+        word-break: break-all !important;
+        overflow-wrap: break-word !important;
 }
 .dont-break-out {
-    /* These are technically the same, but use both */
     overflow-wrap: break-word;
-    word-wrap: break-word;
-
-    -ms-word-break: break-all;
     word-break: break-all;
 
     /* Adds a hyphen where the word breaks, if supported (No Blink) */

public/less/_base.less

@@ -370,13 +370,10 @@
                         padding: 0 !important;
                         li {
                             display: block;
-                            width: 100%;
+                            padding: 0 .25em;
                             &.active {
                                 background: #ffffdd;
                             }
-                            &:before {
-                                content: ' ';
-                            }
                         }
                     }
                 }

public/less/_repository.less

@@ -127,7 +127,7 @@
 															{{if and $.SignedUserID $line.CanComment $.PageIsPullFiles (not (eq .GetType 2))}}
 																<a class="ui green button add-code-comment add-code-comment-left" data-path="{{$file.Name}}" data-side="left" data-idx="{{$line.LeftIdx}}">+</a>
 															{{end}}
-															<pre><code class="wrap {{if $highlightClass}}language-{{$highlightClass}}{{else}}nohighlight{{end}}">{{if $line.LeftIdx}}{{$section.GetComputedInlineDiffFor $line}}{{end}}</code></pre>
+															<pre><code class="{{if $highlightClass}}language-{{$highlightClass}}{{else}}nohighlight{{end}}">{{if $line.LeftIdx}}{{$section.GetComputedInlineDiffFor $line}}{{end}}</code></pre>
 														</td>
 														<td class="lines-num lines-num-new">
 															<span rel="{{if $line.RightIdx}}diff-{{Sha1 $file.Name}}R{{$line.RightIdx}}{{end}}">{{if $line.RightIdx}}{{$line.RightIdx}}{{end}}</span>
@@ -137,7 +137,7 @@
 															{{if and $.SignedUserID $line.CanComment $.PageIsPullFiles (not (eq .GetType 3))}}
 																<a class="ui green button add-code-comment add-code-comment-right" data-path="{{$file.Name}}" data-side="right" data-idx="{{$line.RightIdx}}">+</a>
 															{{end}}
-															<pre><code class="wrap {{if $highlightClass}}language-{{$highlightClass}}{{else}}nohighlight{{end}}">{{if $line.RightIdx}}{{$section.GetComputedInlineDiffFor $line}}{{end}}</code></pre>
+															<pre><code class="{{if $highlightClass}}language-{{$highlightClass}}{{else}}nohighlight{{end}}">{{if $line.RightIdx}}{{$section.GetComputedInlineDiffFor $line}}{{end}}</code></pre>
 														</td>
 													</tr>
 													{{if gt (len $line.Comments) 0}}

templates/repo/diff/box.tmpl

@@ -19,7 +19,7 @@
 				{{if and $.root.SignedUserID $line.CanComment $.root.PageIsPullFiles}}
 					<a class="ui green button add-code-comment add-code-comment-{{if $line.RightIdx}}right{{else}}left{{end}}" data-path="{{$file.Name}}" data-side="{{if $line.RightIdx}}right{{else}}left{{end}}" data-idx="{{if $line.RightIdx}}{{$line.RightIdx}}{{else}}{{$line.LeftIdx}}{{end}}">+</a>
 				{{end}}
-				<pre><code class="wrap {{if $highlightClass}}language-{{$highlightClass}}{{else}}nohighlight{{end}}">{{$section.GetComputedInlineDiffFor $line}}</code></pre>
+				<pre><code class="{{if $highlightClass}}language-{{$highlightClass}}{{else}}nohighlight{{end}}">{{$section.GetComputedInlineDiffFor $line}}</code></pre>
 			</td>
 		</tr>
 		{{if gt (len $line.Comments) 0}}