webview: Fix overflowing diff body (#22959)

susnux · web-flow · commit 8bba7e30b283 · 2023-02-18T09:47:06.000+08:00
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
@@ -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);

Original file line number	Diff line number	Diff line change
`@@ -3187,6 +3187,7 @@ td.blob-excerpt {`
`3187`	`3187`	`}`
`3188`	`3188`	`#diff-file-boxes {`
`3189`	`3189`	`flex: 1;`
	`3190`	`+ max-width: 100%;`
`3190`	`3191`	`}`
`3191`	`3192`
`3192`	`3193`	`#diff-file-tree {`
`@@ -3295,6 +3296,10 @@ td.blob-excerpt {`
`3295`	`3296`	`}`
`3296`	`3297`	`}`
`3297`	`3298`
	`3299`	`+.diff-file-body {`
	`3300`	`+ overflow-x: scroll;`
	`3301`	`+}`
	`3302`	`+`
`3298`	`3303`	`.diff-stats-bar {`
`3299`	`3304`	`display: inline-block;`
`3300`	`3305`	`background-color: var(--color-red);`