From 84be741a114938dc9eb33cc9a8832c1f0fd43414 Mon Sep 17 00:00:00 2001
From: Rashif Ray Rahman <schiv@archlinux.org>
Date: Fri, 7 Nov 2025 23:55:58 +0600
Subject: [PATCH 1/3] 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.
---
 .../html_templates/static/layout.html         | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/dqgen/resources/html_templates/static/layout.html b/dqgen/resources/html_templates/static/layout.html
index 5b38430..22a3a3c 100644
--- a/dqgen/resources/html_templates/static/layout.html
+++ b/dqgen/resources/html_templates/static/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")) {

From cea3f19ce547d135861b9c87b45ba992aa3d9e77 Mon Sep 17 00:00:00 2001
From: Rashif Ray Rahman <schiv@archlinux.org>
Date: Tue, 11 Nov 2025 22:31:48 +0600
Subject: [PATCH 2/3] fix: restore HTML datatable scroll and print layout

- remove forced table width so scrollX can size columns
- allow overflow-x only on screen and expand tables for print
- adjust columns on window resize to keep headers aligned
---
 .../html_templates/static/layout.html         | 29 ++++++++++++-------
 1 file changed, 18 insertions(+), 11 deletions(-)

diff --git a/dqgen/resources/html_templates/static/layout.html b/dqgen/resources/html_templates/static/layout.html
index 22a3a3c..43e797a 100644
--- a/dqgen/resources/html_templates/static/layout.html
+++ b/dqgen/resources/html_templates/static/layout.html
@@ -63,7 +63,7 @@
         }
 
         table.display {
-            width: 100% !important;
+            width: auto;
             min-width: 100%;
         }
 
@@ -72,11 +72,15 @@
                 visibility: hidden;
             }
 
-            #print-container {
-                width: 100% !important;
-                position: absolute;
-                left: 0;
-                top: 0;
+            #print-container,
+            .dataTables_wrapper,
+            .dataTables_scrollHead,
+            .dataTables_scrollBody {
+                overflow: visible !important;
+                width: auto !important;
+            }
+            table.display {
+                width: auto !important;
             }
 
             footer {
@@ -130,15 +134,18 @@ <h1 class="ui header center aligned reportTitle" id="skip-toc">{{ conf.title }}<
 <script type="text/javascript">
     $(document).ready(function () {
 
-        $("table.display").DataTable({
+        const table = $("table.display").DataTable({
             dom: 'B<"clear">lfrtip',
-            buttons: [
-                'print'
-            ],
-            "lengthMenu": [[5, 15, 30, -1], [5, 15, 30, "All"]],
+            buttons: ['print'],
+            lengthMenu: [[5, 15, 30, -1], [5, 15, 30, "All"]],
             scrollX: true,
             autoWidth: false
         });
+
+        $(window).on('resize', function () {
+            table.columns.adjust();
+        });
+
         $("h2").each(function () {
             if (!$(this).next().is("section") && !$(this).next().is("h3") && !$(this).next().hasClass("dataTables_wrapper")) {
                 $(this).remove();

From 55e122db684286ddb19fb9b878d5950b93b00637 Mon Sep 17 00:00:00 2001
From: Rashif Ray Rahman <schiv@archlinux.org>
Date: Tue, 11 Nov 2025 23:24:02 +0600
Subject: [PATCH 3/3] fix: restore HTML report print functionality proper

The JS script of the HTML report layout initialized all tables with the
same DataTables instance. This means:

It treated all `<table class="display">` elements as one combined table.
Some tables have 3 columns, others have 7 or more columns, and some have
empty cells. DataTables tries to apply sorting logic (aDataSort) across
mismatched column structures, leading to the following error in the
browser console:

```
jquery.dataTables.min.js:83  Uncaught TypeError: Cannot read properties of undefined (reading 'aDataSort')
```

Replace the single initialization with per-table initialization using
dynamic column mapping, and update other functions accordingly. Remove
also unnecessary and redundant function wrapping from the only two
functions for `#toc` and `#printButton`.

WARNING: This print functionality automatically expands all pages of
tables in the HTML view before the print view, so you will have to
refresh the page if you desire the paging reactivated.
---
 .../html_templates/static/layout.html         | 67 ++++++++++++-------
 1 file changed, 43 insertions(+), 24 deletions(-)

diff --git a/dqgen/resources/html_templates/static/layout.html b/dqgen/resources/html_templates/static/layout.html
index 43e797a..243c4a4 100644
--- a/dqgen/resources/html_templates/static/layout.html
+++ b/dqgen/resources/html_templates/static/layout.html
@@ -133,18 +133,31 @@ <h1 class="ui header center aligned reportTitle" id="skip-toc">{{ conf.title }}<
 
 <script type="text/javascript">
     $(document).ready(function () {
+        const tables = [];
+
+        $("table.display").each(function () {
+            const columns = $(this).find("th").map(function () {
+                return { orderable: true };
+            }).get();
+
+            const instance = $(this).DataTable({
+                dom: 'B<"clear">lfrtip',
+                buttons: ['print'],
+                lengthMenu: [[5, 15, 30, -1], [5, 15, 30, "All"]],
+                scrollX: true,
+                autoWidth: false,
+                columns: columns
+            });
 
-        const table = $("table.display").DataTable({
-            dom: 'B<"clear">lfrtip',
-            buttons: ['print'],
-            lengthMenu: [[5, 15, 30, -1], [5, 15, 30, "All"]],
-            scrollX: true,
-            autoWidth: false
+            tables.push(instance);
         });
 
-        $(window).on('resize', function () {
-            table.columns.adjust();
-        });
+        // Fix column alignment on window resize
+        if (tables.length) {
+            $(window).on('resize', function () {
+                tables.forEach(dt => dt.columns.adjust());
+            });
+        }
 
         $("h2").each(function () {
             if (!$(this).next().is("section") && !$(this).next().is("h3") && !$(this).next().hasClass("dataTables_wrapper")) {
@@ -167,23 +180,29 @@ <h1 class="ui header center aligned reportTitle" id="skip-toc">{{ conf.title }}<
             $("#print-container").append("<p><strong>Datasets are identical and no difference was found</strong></p>")
         }
 
-        $(function () {
-            $("#toc").tocify({
-                selectors: "h1,h2",
-                theme: "jqueryui",
-                hashGenerator: "pretty",
-                ignoreSelector: "#skip-toc",
-                highlightOnScroll: "true",
-                highlightDefault: "true"
-            });
+        $("#toc").tocify({
+            selectors: "h1,h2",
+            theme: "jqueryui",
+            hashGenerator: "pretty",
+            ignoreSelector: "#skip-toc",
+            highlightOnScroll: "true",
+            highlightDefault: "true"
         });
 
-        $(function () {
-            $("#printButton").click(function () {
-                $("table.display").DataTable().page.len(-1).draw()
-                window.print()
-            })
-        })
+        $("#printButton").click(function () {
+            // First, expand all tables to show all rows
+            tables.forEach(dt => dt.page.len(-1).draw());
+
+            // Force a reflow so print styles can apply
+            // Then recalculate column widths for print layout
+            setTimeout(function() {
+                tables.forEach(dt => dt.columns.adjust());
+                // Small delay to ensure adjustments complete before print dialog
+                setTimeout(function() {
+                    window.print();
+                }, 50);
+            }, 100);
+        });
 
 
     });