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

3 files changed, 26 insertions, 40 deletions

diff --git a/web_src/less/_base.less b/web_src/less/_base.less
index 9a22e075f5..09e796ac5e 100644
--- a/web_src/less/_base.less
+++ b/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;
diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less
index 45abae9178..72b500d4ab 100644
--- a/web_src/less/_repository.less
+++ b/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;
 }
diff --git a/web_src/less/helpers.less b/web_src/less/helpers.less
index fff866c66c..b62ce3494b 100644
--- a/web_src/less/helpers.less
+++ b/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; }