From 2d6007ead456f007c7c3824b4c823cb4eb3aec67 Mon Sep 17 00:00:00 2001
From: Lephe <sebastien.michelland@protonmail.com>
Date: Sun, 11 Jul 2021 10:09:08 +0200
Subject: [PATCH] improve rendering and overflow of code blocks

---
 app/static/css/table.css                | 21 ++++++++++++++++++---
 app/static/css/themes/default_theme.css |  5 +++++
 2 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/app/static/css/table.css b/app/static/css/table.css
index e570976..092b97a 100644
--- a/app/static/css/table.css
+++ b/app/static/css/table.css
@@ -24,21 +24,36 @@ table:not(.codehilitetable) td {
 /* Code fragments */
 
 table.codehilitetable {
-  background: var(--background);
   border: none;
   width: 100%;
+  /* This seems to be the only way to prevent the automatic table size
+     algorithm from assigning extreme widths when content overflows.
+     Fortunately the structure of the table is very simple, so we can afford to
+     set a fixed width on line numbers and move on */
+  table-layout: fixed;
 }
-table.codehilitetable tr {
-  background: unset;
+table.codehilitetable tr:nth-child(even),
+table.codehilitetable tr:nth-child(odd) {
+  background: none;
 }
 table.codehilitetable td {
   padding: 0;
 }
+table.codehilitetable td.linenos {
+  width: 40px;
+  text-align: right;
+}
+table.codehilitetable td.linenos span {
+  padding-right: 8px;
+}
 table.codehilitetable td.code,
 table.codehilitetable pre {
   margin: 0;
   width: 100%;
 }
+table.codehilitetable pre {
+  overflow-x: auto;
+}
 
 /* Forum and sub-forum listings */
 
diff --git a/app/static/css/themes/default_theme.css b/app/static/css/themes/default_theme.css
index 09edd22..e4d0972 100644
--- a/app/static/css/themes/default_theme.css
+++ b/app/static/css/themes/default_theme.css
@@ -117,3 +117,8 @@ div.editor-toolbar, div.CodeMirror {
     --separator: #a0a0a0;
     --text-disabled: #c0c0c0;
 }
+
+/* Extra style on top of the Pygments style */
+table.codehilitetable td.linenos {
+    color: #808080;
+}