fix: making pre scrollable on tables

Signed-off-by: Lautaro Mazzitelli <[email protected]>
zentralopensource · Nov 9, 2023 · 4d33afa · 4d33afa
1 parent 0bbd2da
commit 4d33afa
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 4 deletions.
diff --git 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
@@ -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>