git » git-arr » commit 9f3df48

css: Improve handling of text overflow in <pre>

author Alberto Bertogli
2021-05-15 00:04:19 UTC
committer Alberto Bertogli
2021-05-15 00:24:58 UTC
parent bc1ee87dfeece93c92bf14f5af1008278fe05e46
css: Improve handling of text overflow in <pre>

When a <pre> section (commit message, blob, diff) has a very long line,
today it makes the entire page very wide, causing usability issues.

This patch makes <pre> have a horizontal scroll in those cases, which is
easier to use.
static/git-arr.css +8 -0 
diff --git a/static/git-arr.css b/static/git-arr.css
index 2e4dcf8..e9533c7 100644
--- a/static/git-arr.css
+++ b/static/git-arr.css
@@ -147,6 +147,14 @@ div.toggable-title {
     margin-bottom: 0.3em;
 }
 
+pre {
+    /* Sometimes, <pre> elements (commit messages, diffs, blobs) have very
+     * long lines. In those case, use automatic overflow, which will
+     * introduce a horizontal scroll bar for this element only (more
+     * comfortable than stretching the page, which is the default). */
+    overflow: auto;
+}
+
 
 /* Commit message and diff. */
 pre.commit-message {