fix: enable table horizontal scrolling when wide

Wide tables did not trigger a horizontal scrollbar either on the page or
the table, therefore cutting off the table. Add some JavaScript and CSS
tricks suggested by CursorAI, namely with `scrollX` and accompanying CSS
to allow the scrollbar on the DataTable.

Application of meaningfy-ws/diff-query-generator#33.

Fixes gh-130, DIF1-27

Author: schivmeister

resources/templates/owl-core-en-only/template_variants/html/templates/layout.html

@@ -53,6 +53,20 @@
             margin-top: 0.5em;
         }
 
+        /* Enable horizontal scrolling for wide tables */
+        #print-container {
+            overflow-x: auto;
+        }
+
+        .dataTables_wrapper {
+            overflow-x: auto;
+        }
+
+        table.display {
+            width: 100% !important;
+            min-width: 100%;
+        }
+
         @media print {
             #toc {
                 visibility: hidden;
@@ -122,9 +136,8 @@ <h1 class="ui header center aligned reportTitle" id="skip-toc">{{ conf.title }}<
                 'print'
             ],
             "lengthMenu": [[5, 15, 30, -1], [5, 15, 30, "All"]],
-            responsive: {
-                details: true
-            }
+            scrollX: true,
+            autoWidth: false
         });
         $("h2").each(function () {
             if (!$(this).next().is("section") && !$(this).next().is("h3") && !$(this).next().hasClass("dataTables_wrapper")) {

resources/templates/shacl-core-en-only/template_variants/html/templates/layout.html

@@ -53,6 +53,20 @@
             margin-top: 0.5em;
         }
 
+        /* Enable horizontal scrolling for wide tables */
+        #print-container {
+            overflow-x: auto;
+        }
+
+        .dataTables_wrapper {
+            overflow-x: auto;
+        }
+
+        table.display {
+            width: 100% !important;
+            min-width: 100%;
+        }
+
         @media print {
             #toc {
                 visibility: hidden;
@@ -122,9 +136,8 @@ <h1 class="ui header center aligned reportTitle" id="skip-toc">{{ conf.title }}<
                 'print'
             ],
             "lengthMenu": [[5, 15, 30, -1], [5, 15, 30, "All"]],
-            responsive: {
-                details: true
-            }
+            scrollX: true,
+            autoWidth: false
         });
         $("h2").each(function () {
             if (!$(this).next().is("section") && !$(this).next().is("h3") && !$(this).next().hasClass("dataTables_wrapper")) {

resources/templates/skos-core-en-only/template_variants/html/templates/layout.html

@@ -53,6 +53,20 @@
             margin-top: 0.5em;
         }
 
+        /* Enable horizontal scrolling for wide tables */
+        #print-container {
+            overflow-x: auto;
+        }
+
+        .dataTables_wrapper {
+            overflow-x: auto;
+        }
+
+        table.display {
+            width: 100% !important;
+            min-width: 100%;
+        }
+
         @media print {
             #toc {
                 visibility: hidden;
@@ -122,9 +136,8 @@ <h1 class="ui header center aligned reportTitle" id="skip-toc">{{ conf.title }}<
                 'print'
             ],
             "lengthMenu": [[5, 15, 30, -1], [5, 15, 30, "All"]],
-            responsive: {
-                details: true
-            }
+            scrollX: true,
+            autoWidth: false
         });
         $("h2").each(function () {
             if (!$(this).next().is("section") && !$(this).next().is("h3") && !$(this).next().hasClass("dataTables_wrapper")) {