webview: Fix overflowing diff body (#22959)

If the content is quite large the diff body overflows the container and
can not be read.
This is fixed by setting the diff body maximum width to 100% and enable
overflow scrollbars:

before | after
---|---

![Screenshot_20230217_184716](https://user-images.githubusercontent.com/1855448/219733934-75bec38c-7cfe-47bb-b001-b090c02b769e.png)
|
![Screenshot_20230217_184655](https://user-images.githubusercontent.com/1855448/219733971-4db092d1-ffcb-4298-a640-f740a3ac430b.png)

Signed-off-by: Ferdinand Thiessen <rpm@fthiessen.de>

diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less
index 39362722de53517373f63578d4961e78dd7ae122..f7087d4d30519b66f1c7dea9acec05657ea14a62 100644 (file)
--- a/web_src/less/_repository.less
+++ b/web_src/less/_repository.less
@@ -3187,6 +3187,7 @@ td.blob-excerpt {
 }
 #diff-file-boxes {
   flex: 1;
+  max-width: 100%;
 }
 
 #diff-file-tree {
@@ -3295,6 +3296,10 @@ td.blob-excerpt {
   }
 }
 
+.diff-file-body {
+  overflow-x: scroll;
+}
+
 .diff-stats-bar {
   display: inline-block;
   background-color: var(--color-red);