Fix whitespace rendering in diff (#13415)

- Introduce new .code-inner class that sets the CSS attributes on
rendered code lines like view,blame and diff.
- Rename .wrap class to .word-break to reflect what it actually does
- Remove .raw which was only used on webhook page
- Set white-space: pre-wrap except on blame where it can break the
layout

Fixes: https://github.com/go-gitea/gitea/issues/13406

routers/repo/blame.go

@@ -237,6 +237,7 @@ func renderBlame(ctx *context.Context, blameParts []git.BlamePart, commitNames m
 			}
 			fileName := fmt.Sprintf("%v", ctx.Data["FileName"])
 			line = highlight.Code(fileName, line)
+			line = `<code class="code-inner">` + line + `</code>`
 			if len(part.Lines)-1 == index && len(blameParts)-1 != pi {
 				codeLines.WriteString(fmt.Sprintf(`<li class="L%d bottom-line" rel="L%d">%s</li>`, i, i, line))
 			} else {

templates/repo/blame.tmpl

@@ -26,7 +26,7 @@
 					<tr>
 						<td class="lines-commit">{{.BlameCommitInfo}}</td>
 						<td class="lines-num">{{.BlameLineNums}}</td>
-						<td class="lines-code"><pre><code class="chroma"><ol class="linenums">{{.BlameContent}}</ol></code></pre></td>
+						<td class="lines-code"><code class="chroma"><ol class="linenums">{{.BlameContent}}</ol></code></td>
 					</tr>
 				</tbody>
 			</table>

templates/repo/diff/blob_excerpt.tmpl

@@ -19,14 +19,14 @@
 					</a>
 				{{end}}
 			</td>
-			<td colspan="5" class="lines-code lines-code-old "><span class="mono wrap">{{$.section.GetComputedInlineDiffFor $line}}</span></td>
+			<td colspan="5" class="lines-code lines-code-old "><code class="code-inner">{{$.section.GetComputedInlineDiffFor $line}}</code></td>
 		{{else}}
 			<td class="lines-num lines-num-old" data-line-num="{{if $line.LeftIdx}}{{$line.LeftIdx}}{{end}}"><span rel="{{if $line.LeftIdx}}diff-{{Sha1 $.fileName}}L{{$line.LeftIdx}}{{end}}"></span></td>
 			<td class="blob-excerpt lines-type-marker lines-type-marker-old">{{if $line.LeftIdx}}<span class="mono" data-type-marker=""></span>{{end}}</td>
-			<td class="blob-excerpt lines-code lines-code-old halfwidth"><span class="mono wrap">{{if $line.LeftIdx}}{{$.section.GetComputedInlineDiffFor $line}}{{end}}</span></td>
+			<td class="blob-excerpt lines-code lines-code-old halfwidth"><code class="code-inner">{{if $line.LeftIdx}}{{$.section.GetComputedInlineDiffFor $line}}{{end}}</code></td>
 			<td class="lines-num lines-num-new" data-line-num="{{if $line.RightIdx}}{{$line.RightIdx}}{{end}}"><span rel="{{if $line.RightIdx}}diff-{{Sha1 $.fileName}}R{{$line.RightIdx}}{{end}}"></span></td>
 			<td class="blob-excerpt lines-type-marker lines-type-marker-new">{{if $line.RightIdx}}<span class="mono" data-type-marker=""></span>{{end}}</td>
-			<td class="blob-excerpt lines-code lines-code-new halfwidth"><span class="mono wrap">{{if $line.RightIdx}}{{$.section.GetComputedInlineDiffFor $line}}{{end}}</span></td>
+			<td class="blob-excerpt lines-code lines-code-new halfwidth"><code class="code-inner">{{if $line.RightIdx}}{{$.section.GetComputedInlineDiffFor $line}}{{end}}</code></td>
 		{{end}}
 	</tr>
 	{{end}}
@@ -56,7 +56,7 @@
 			<td class="lines-num lines-num-new" data-line-num="{{if $line.RightIdx}}{{$line.RightIdx}}{{end}}"><span rel="{{if $line.RightIdx}}diff-{{Sha1 $.fileName}}R{{$line.RightIdx}}{{end}}"></span></td>
 		{{end}}
 		<td class="blob-excerpt lines-type-marker"><span class="mono" data-type-marker="{{$line.GetLineTypeMarker}}"></span></td>
-		<td class="blob-excerpt lines-code{{if (not $line.RightIdx)}} lines-code-old{{end}}"><span class="mono wrap">{{$.section.GetComputedInlineDiffFor $line}}</span></td>
+		<td class="blob-excerpt lines-code{{if (not $line.RightIdx)}} lines-code-old{{end}}"><code class="code-inner">{{$.section.GetComputedInlineDiffFor $line}}</code></td>
 	</tr>
 	{{end}}
 {{end}}

templates/repo/diff/box.tmpl

@@ -154,14 +154,14 @@
 																		</a>
 																	{{end}}
 																</td>
-																<td colspan="5" class="lines-code lines-code-old "><span class="mono wrap">{{$section.GetComputedInlineDiffFor $line}}</span></td>
+																<td colspan="5" class="lines-code lines-code-old "><code class="code-inner">{{$section.GetComputedInlineDiffFor $line}}</span></td>
 															{{else}}
 																<td class="lines-num lines-num-old" data-line-num="{{if $line.LeftIdx}}{{$line.LeftIdx}}{{end}}"><span rel="{{if $line.LeftIdx}}diff-{{Sha1 $file.Name}}L{{$line.LeftIdx}}{{end}}"></span></td>
 																<td class="lines-type-marker lines-type-marker-old">{{if $line.LeftIdx}}<span class="mono" data-type-marker="{{$line.GetLineTypeMarker}}"></span>{{end}}</td>
-																<td class="lines-code lines-code-old halfwidth">{{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}}" data-type-marker="+"></a>{{end}}<span class="mono wrap">{{if $line.LeftIdx}}{{$section.GetComputedInlineDiffFor $line}}{{end}}</span></td>
+																<td class="lines-code lines-code-old halfwidth">{{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}}" data-type-marker="+"></a>{{end}}<code class="code-inner">{{if $line.LeftIdx}}{{$section.GetComputedInlineDiffFor $line}}{{end}}</code></td>
 																<td class="lines-num lines-num-new" data-line-num="{{if $line.RightIdx}}{{$line.RightIdx}}{{end}}"><span rel="{{if $line.RightIdx}}diff-{{Sha1 $file.Name}}R{{$line.RightIdx}}{{end}}"></span></td>
 																<td class="lines-type-marker lines-type-marker-new">{{if $line.RightIdx}}<span class="mono" data-type-marker="{{$line.GetLineTypeMarker}}"></span>{{end}}</td>
-																<td class="lines-code lines-code-new halfwidth">{{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}}" data-type-marker="+"></a>{{end}}<span class="mono wrap">{{if $line.RightIdx}}{{$section.GetComputedInlineDiffFor $line}}{{end}}</span></td>
+																<td class="lines-code lines-code-new halfwidth">{{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}}" data-type-marker="+"></a>{{end}}<code class="code-inner">{{if $line.RightIdx}}{{$section.GetComputedInlineDiffFor $line}}{{end}}</code></td>
 															{{end}}
 														</tr>
 														{{if gt (len $line.Comments) 0}}

templates/repo/diff/section_unified.tmpl

@@ -27,9 +27,9 @@
 				{{end}}
 				<td class="lines-type-marker"><span class="mono" data-type-marker="{{$line.GetLineTypeMarker}}"></span></td>
 				{{if eq .GetType 4}}
-					<td class="chroma lines-code blob-hunk"><span class="mono wrap">{{$section.GetComputedInlineDiffFor $line}}</span></td>
+					<td class="chroma lines-code blob-hunk"><code class="code-inner">{{$section.GetComputedInlineDiffFor $line}}</code></td>
 				{{else}}
-					<td class="chroma lines-code{{if (not $line.RightIdx)}} lines-code-old{{end}}">{{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}}" data-type-marker="+"></a>{{end}}<span class="mono wrap">{{$section.GetComputedInlineDiffFor $line}}</span></td>
+					<td class="chroma lines-code{{if (not $line.RightIdx)}} lines-code-old{{end}}">{{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}}" data-type-marker="+"></a>{{end}}<code class="code-inner">{{$section.GetComputedInlineDiffFor $line}}</code></td>
 				{{end}}
 			</tr>
 			{{if gt (len $line.Comments) 0}}

templates/repo/settings/webhook/history.tmpl

@@ -44,12 +44,12 @@
 						<div class="ui bottom attached tab segment active" data-tab="request-{{.ID}}">
 							{{if .RequestInfo}}
 								<h5>{{$.i18n.Tr "repo.settings.webhook.headers"}}</h5>
-								<pre class="raw"><strong>Request URL:</strong> {{.URL}}
+								<pre class="webhook-info"><strong>Request URL:</strong> {{.URL}}
 <strong>Request method:</strong> {{if .HTTPMethod}}{{.HTTPMethod}}{{else}}POST{{end}}
 {{ range $key, $val := .RequestInfo.Headers }}<strong>{{$key}}:</strong> {{$val}}
 {{end}}</pre>
 								<h5>{{$.i18n.Tr "repo.settings.webhook.payload"}}</h5>
-								<pre class="raw"><code class="json">{{.PayloadContent}}</code></pre>
+								<pre class="webhook-info"><code class="json">{{.PayloadContent}}</code></pre>
 							{{else}}
 								N/A
 							{{end}}
@@ -57,10 +57,10 @@
 						<div class="ui bottom attached tab segment" data-tab="response-{{.ID}}">
 							{{if .ResponseInfo}}
 								<h5>{{$.i18n.Tr "repo.settings.webhook.headers"}}</h5>
-								<pre class="raw">{{ range $key, $val := .ResponseInfo.Headers }}<strong>{{$key}}:</strong> {{$val}}
+								<pre class="webhook-info">{{ range $key, $val := .ResponseInfo.Headers }}<strong>{{$key}}:</strong> {{$val}}
 {{end}}</pre>
 								<h5>{{$.i18n.Tr "repo.settings.webhook.body"}}</h5>
-								<pre class="raw"><code>{{.ResponseInfo.Body}}</code></pre>
+								<pre class="webhook-info"><code>{{.ResponseInfo.Body}}</code></pre>
 							{{else}}
 								N/A
 							{{end}}

templates/repo/view_file.tmpl

@@ -99,7 +99,7 @@
 								<span id="L{{$line}}" data-line-number="{{$line}}"></span>
 							</td>
 							<td rel="L{{$line}}" class="lines-code chroma">
-								<code>{{$code | Safe}}</code>
+								<code class="code-inner">{{$code | Safe}}</code>
 							</td>
 						</tr>
 						{{end}}

templates/repo/wiki/revision.tmpl

@@ -31,7 +31,7 @@
 			<div class="ui header eight wide column">
 				<a class="file-revisions-btn ui basic button" title="{{.i18n.Tr "repo.wiki.back_to_wiki"}}" href="{{.RepoLink}}/wiki/{{.PageURL}}" ><span>{{.revision}}</span> {{svg "octicon-home"}}</a>
 				{{$title}}
-				<div class="ui sub header wrap">
+				<div class="ui sub header word-break">
 					{{$timeSince := TimeSince .Author.When $.Lang}}
 					{{.i18n.Tr "repo.wiki.last_commit_info" .Author.Name $timeSince | Safe}}
 				</div>

templates/user/profile.tmpl

@@ -13,11 +13,11 @@
 							<img src="{{.Owner.SizedRelAvatarLink 290}}" title="{{.Owner.Name}}" height="290" width="290"/>
 						</span>
 					{{end}}
-					<div class="content wrap">
+					<div class="content word-break">
 						{{if .Owner.FullName}}<span class="header text center">{{.Owner.FullName}}</span>{{end}}
 						<span class="username text center">{{.Owner.Name}}</span>
 					</div>
-					<div class="extra content wrap">
+					<div class="extra content word-break">
 						<ul class="text black">
 							{{if .Owner.Location}}
 								<li>{{svg "octicon-location"}} {{.Owner.Location}}</li>

web_src/less/_base.less

@@ -177,42 +177,6 @@ a:hover,
   color: var(--color-primary-dark-2);
 }
 
-.rounded {
-  border-radius: var(--border-radius) !important;
-}
-
-.wrap {
-  word-wrap: break-word;
-  word-break: break-all;
-}
-
-.mono {
-  font-family: var(--fonts-monospace);
-}
-
-pre,
-code {
-  font: 12px var(--fonts-monospace);
-
-  &.raw {
-    padding: 7px 12px;
-    margin: 10px 0;
-    background-color: #f8f8f8;
-    border: 1px solid #dddddd;
-    border-radius: 3px;
-    font-size: 13px;
-    line-height: 1.5;
-    overflow: auto;
-  }
-
-  &.wrap {
-    white-space: pre-wrap;
-    word-break: break-all;
-    overflow-wrap: break-word;
-    word-wrap: break-word;
-  }
-}
-
 .dont-break-out {
   overflow-wrap: break-word;
   word-wrap: break-word;
@@ -1137,10 +1101,6 @@ i.icon.centerlock {
   padding-left: 5px;
 }
 
-.lines-code code {
-  white-space: pre;
-}
-
 .lines-code.active,
 .lines-code .active {
   background: #fffbdd !important;
@@ -1155,6 +1115,18 @@ i.icon.centerlock {
   padding: 0 !important;
 }
 
+.code-inner {
+  font: 12px var(--fonts-monospace);
+  white-space: pre-wrap;
+  word-break: break-all;
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+}
+
+.blame .code-inner {
+  white-space: pre;
+}
+
 .lines-commit {
   vertical-align: top;
   color: #999999;

web_src/less/_repository.less

@@ -3239,6 +3239,17 @@ td.blob-excerpt {
   padding-left: 8px;
 }
 
+.webhook-info {
+  padding: 7px 12px;
+  margin: 10px 0;
+  background-color: #f8f8f8;
+  border: 1px solid #dddddd;
+  border-radius: 3px;
+  font-size: 13px;
+  line-height: 1.5;
+  overflow: auto;
+}
+
 .title_wip_desc {
   margin-top: 1em;
 }

web_src/less/helpers.less

@@ -4,6 +4,9 @@
 .js { justify-content: flex-start; }
 .je { justify-content: flex-end; }
 .sb { justify-content: space-between; }
+.mono { font-family: var(--fonts-monospace); }
+.rounded { border-radius: var(--border-radius) !important; }
+.word-break { word-wrap: break-word; word-break: break-all; }
 
 .m-0 { margin: 0 !important; }
 .m-1 { margin: .125rem !important; }