From 4d33afa7da5b76d4583cdd64579ba96d4d4ae50a Mon Sep 17 00:00:00 2001
From: Lautaro Mazzitelli <lmazzitelli@gmail.com>
Date: Thu, 9 Nov 2023 16:10:47 +0100
Subject: [PATCH] fix: making pre scrollable on tables

Signed-off-by: Lautaro Mazzitelli <lmazzitelli@gmail.com>
---
 server/static_src/scss/styles.scss                 | 14 ++++++++++++--
 .../munki/templates/munki/scriptcheck_detail.html  |  6 ++++--
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/server/static_src/scss/styles.scss b/server/static_src/scss/styles.scss
index 926481b1d6..74225a8068 100644
--- a/server/static_src/scss/styles.scss
+++ b/server/static_src/scss/styles.scss
@@ -43,13 +43,23 @@ pre, ol, ul, dl {
     margin-bottom: 0px;
 }
 
-table .w-3 { width:3%; }
-
 .errorlist {
     color: $zred;
     font-weight: bold;
 }
 
+// Table styling
+table .w-3 { width:3%; }
+
+table.table-fixed-scrolleable {
+    table-layout: fixed;
+}
+
+pre.scrolleable {
+    overflow-x: scroll;
+    padding-bottom: 2em;
+}
+
 // Side menu
 .list-group-item {
     border-color: transparent;
diff --git a/zentral/contrib/munki/templates/munki/scriptcheck_detail.html b/zentral/contrib/munki/templates/munki/scriptcheck_detail.html
index 22e17c84cb..c736382518 100644
--- a/zentral/contrib/munki/templates/munki/scriptcheck_detail.html
+++ b/zentral/contrib/munki/templates/munki/scriptcheck_detail.html
@@ -39,7 +39,7 @@ <h3 class="m-0 fs-5 text-secondary">Script check</h3>
     </div>
 
     <div class="table-responsive mb-3">
-        <table class="table table-light table-striped align-middle table-object-properties">
+        <table class="table table-light table-striped align-middle table-object-properties table-fixed-scrolleable">
         <thead>
             <th style="width:15%">Attribute</th>
             <th>Value</th>
@@ -59,7 +59,9 @@ <h3 class="m-0 fs-5 text-secondary">Script check</h3>
             </tr>
             <tr>
             <td>Source</td>
-            <td><pre>{{ object.source }}</pre></td>
+                <td>
+                    <pre class="scrolleable">{{ object.source }}</pre>
+                </td>
             </tr>
             <tr>
             <td>Expected result</td>