From eb883fa96721f0664d9ad412a4d2c2bf01b559de Mon Sep 17 00:00:00 2001
From: Dvermetten <d.vermetten@gmail.com>
Date: Tue, 21 Apr 2026 11:56:34 +0200
Subject: [PATCH 1/3] Update UI of the table

---
 docs/index.html       | 164 ++++++++++++++++++++++---
 docs/javascript.html  | 140 +++++++++++++++++++---
 docs/problems.html    |  25 +++-
 docs/table_styles.css | 273 +++++++++++++++++++++++++++++++++++++++---
 yaml_to_html.py       |  52 +++++++-
 5 files changed, 594 insertions(+), 60 deletions(-)

diff --git a/docs/index.html b/docs/index.html
index c544e1f..d39b48e 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -24,7 +24,20 @@ <h2>OPL &ndash; Optimisation problem library</h2>
 <p>
 Submit problems and corrections on <a target="_blank" href="https://github.com/OpenOptimizationOrg/OPL/">GitHub</a> with pull requests / issues, through the <a target="_blank" href="https://docs.google.com/forms/d/e/1FAIpQLSehQp24AuFAH2j9jizDhq8K_BYgNGMKXWTMu6s-2RwEJrK59Q/viewform">Google form</a>, or by email: <a href="mailto:koen.van.der.blom@cwi.nl" itemprop="email">koen.van.der.blom@cwi.nl</a>
 </p>
-<table class="dataframe display compact display styled-table" id="problems">
+
+<section class="table-shell">
+    <div class="table-toolbar">
+        <div class="toolbar-title">Visible columns</div>
+        <div class="toolbar-actions">
+            <button type="button" class="toolbar-btn" id="show-all-columns">Show all</button>
+            <button type="button" class="toolbar-btn" id="hide-all-columns">Hide all</button>
+        </div>
+        <div class="column-controls">
+            <label class="column-chip"><input class="col-toggle" type="checkbox" data-column="0" checked><span>name</span></label><label class="column-chip"><input class="col-toggle" type="checkbox" data-column="1"><span>textual description</span></label><label class="column-chip"><input class="col-toggle" type="checkbox" data-column="2" checked><span>suite/generator/single</span></label><label class="column-chip"><input class="col-toggle" type="checkbox" data-column="3" checked><span>objectives</span></label><label class="column-chip"><input class="col-toggle" type="checkbox" data-column="4" checked><span>dimensionality</span></label><label class="column-chip"><input class="col-toggle" type="checkbox" data-column="5" checked><span>variable type</span></label><label class="column-chip"><input class="col-toggle" type="checkbox" data-column="6" checked><span>constraints</span></label><label class="column-chip"><input class="col-toggle" type="checkbox" data-column="7" checked><span>dynamic</span></label><label class="column-chip"><input class="col-toggle" type="checkbox" data-column="8" checked><span>noise</span></label><label class="column-chip"><input class="col-toggle" type="checkbox" data-column="9" checked><span>multi-fidelity</span></label><label class="column-chip"><input class="col-toggle" type="checkbox" data-column="10" checked><span>source (real-world/artificial)</span></label><label class="column-chip"><input class="col-toggle" type="checkbox" data-column="11"><span>reference</span></label><label class="column-chip"><input class="col-toggle" type="checkbox" data-column="12"><span>implementation</span></label>
+        </div>
+    </div>
+    <div class="table-wrap">
+        <table class="dataframe display compact display styled-table" id="problems">
   <thead>
     <tr style="text-align: right;">
       <th>name</th>
@@ -1215,46 +1228,161 @@ <h2>OPL &ndash; Optimisation problem library</h2>
     </tr>
   </tbody>
 <tfoot><tr><th>name</th> <th>textual description</th> <th>suite/generator/single</th> <th>objectives</th> <th>dimensionality</th> <th>variable type</th> <th>constraints</th> <th>dynamic</th> <th>noise</th> <th>multi-fidelity</th> <th>source (real-world/artificial)</th> <th>reference</th> <th>implementation</th></tr> </tfoot></table>
+    </div>
+</section>
+
+<section class="details-shell" id="problem-details" aria-live="polite">
+    <h3 class="details-title">Problem details</h3>
+    <p class="details-hint" id="problem-details-hint">Click a table row to inspect full details.</p>
+    <dl class="details-grid" id="problem-details-content"></dl>
+</section>
+
 
 <script>
-new DataTable('#problems', {
+const table = new DataTable('#problems', {
     layout: {
         topStart: 'search',
         topEnd: null,
         bottomStart: 'info',
         bottom: 'paging',
         bottomEnd: 'pageLength'
-        },
-    lengthMenu: [15, 25, 50, -1],
+    },
+    lengthMenu: [10, 15, 25, 50, -1],
     initComplete: function () {
         this.api()
             .columns()
             .every(function () {
-                let column = this;
-                let title = column.footer().textContent;
- 
-                // Create input element
-                let input = document.createElement('input');
-                input.placeholder = title;
+                const column = this;
+                const title = column.footer().textContent;
+                const input = document.createElement('input');
+                input.placeholder = `Filter ${title}`;
                 column.footer().replaceChildren(input);
- 
-                // Event listener for user input
+
                 input.addEventListener('keyup', () => {
-                    if (column.search() !== this.value) {
+                    if (column.search() !== input.value) {
                         column.search(input.value).draw();
                     }
                 });
 
-                // Stop search boxes from applying sorting
-                input.addEventListener('click', (e) => {
-                    e.stopPropagation();
+                // Prevent sorting when interacting with filter inputs.
+                input.addEventListener('click', (event) => {
+                    event.stopPropagation();
                 });
             });
     }
 });
 
-// Move row with search boxes to second row
-$('#problems tfoot tr').appendTo('#problems thead');
+const footerRow = document.querySelector('#problems tfoot tr');
+const thead = document.querySelector('#problems thead');
+if (footerRow && thead) {
+    thead.appendChild(footerRow);
+}
+
+const detailsHint = document.getElementById('problem-details-hint');
+const detailsContent = document.getElementById('problem-details-content');
+
+const stripHtml = (value) => {
+    const wrapper = document.createElement('div');
+    wrapper.innerHTML = value || '';
+    return wrapper.textContent || wrapper.innerText || '';
+};
+
+const escapeHtml = (value) => {
+    const wrapper = document.createElement('div');
+    wrapper.textContent = value || '';
+    return wrapper.innerHTML;
+};
+
+const renderRowDetails = (rowApi) => {
+    const rowData = rowApi.data();
+    if (!rowData || !detailsContent) {
+        return;
+    }
+
+    const headers = table
+        .columns()
+        .header()
+        .toArray()
+        .map((header) => header.textContent.trim());
+
+    const detailsHtml = headers
+        .map((label, index) => {
+            const value = rowData[index] || '<span class="details-empty">n/a</span>';
+            return `<div class="detail-item"><dt>${escapeHtml(label)}</dt><dd>${value}</dd></div>`;
+        })
+        .join('');
+
+    const name = stripHtml(rowData[0]);
+    if (detailsHint) {
+        detailsHint.textContent = name ? `Selected: ${name}` : 'Selected row';
+    }
+
+    detailsContent.innerHTML = detailsHtml;
+};
+
+const applyColumnVisibility = (redraw = true) => {
+    document.querySelectorAll('.col-toggle').forEach((toggle) => {
+        const index = Number(toggle.getAttribute('data-column'));
+        const chip = toggle.closest('.column-chip');
+
+        if (chip) {
+            chip.classList.toggle('is-off', !toggle.checked);
+        }
+
+        table.column(index).visible(toggle.checked, false);
+    });
+
+    table.columns.adjust().draw(redraw);
+};
+
+document.querySelectorAll('.col-toggle').forEach((toggle) => {
+    toggle.addEventListener('change', () => {
+        applyColumnVisibility(false);
+    });
+});
+
+const setAllColumns = (visible) => {
+    document.querySelectorAll('.col-toggle').forEach((toggle) => {
+        toggle.checked = visible;
+    });
+
+    applyColumnVisibility(false);
+};
+
+const showAllButton = document.getElementById('show-all-columns');
+if (showAllButton) {
+    showAllButton.addEventListener('click', () => setAllColumns(true));
+}
+
+const hideAllButton = document.getElementById('hide-all-columns');
+if (hideAllButton) {
+    hideAllButton.addEventListener('click', () => setAllColumns(false));
+}
+
+const tableBody = document.querySelector('#problems tbody');
+if (tableBody) {
+    tableBody.addEventListener('click', (event) => {
+        const targetRow = event.target.closest('tr');
+        if (!targetRow) {
+            return;
+        }
+
+        const rowApi = table.row(targetRow);
+        if (!rowApi || !rowApi.any()) {
+            return;
+        }
+
+        document.querySelectorAll('#problems tbody tr.is-active').forEach((row) => {
+            row.classList.remove('is-active');
+        });
+
+        targetRow.classList.add('is-active');
+        renderRowDetails(rowApi);
+    });
+}
+
+// Honor default checkbox states (some columns start hidden).
+applyColumnVisibility(false);
 
 </script>
 
diff --git a/docs/javascript.html b/docs/javascript.html
index a194ca7..73f9e58 100644
--- a/docs/javascript.html
+++ b/docs/javascript.html
@@ -1,44 +1,150 @@
 
 
 <script>
-new DataTable('#problems', {
+const table = new DataTable('#problems', {
     layout: {
         topStart: 'search',
         topEnd: null,
         bottomStart: 'info',
         bottom: 'paging',
         bottomEnd: 'pageLength'
-        },
-    lengthMenu: [15, 25, 50, -1],
+    },
+    lengthMenu: [10, 15, 25, 50, -1],
     initComplete: function () {
         this.api()
             .columns()
             .every(function () {
-                let column = this;
-                let title = column.footer().textContent;
- 
-                // Create input element
-                let input = document.createElement('input');
-                input.placeholder = title;
+                const column = this;
+                const title = column.footer().textContent;
+                const input = document.createElement('input');
+                input.placeholder = `Filter ${title}`;
                 column.footer().replaceChildren(input);
- 
-                // Event listener for user input
+
                 input.addEventListener('keyup', () => {
-                    if (column.search() !== this.value) {
+                    if (column.search() !== input.value) {
                         column.search(input.value).draw();
                     }
                 });
 
-                // Stop search boxes from applying sorting
-                input.addEventListener('click', (e) => {
-                    e.stopPropagation();
+                // Prevent sorting when interacting with filter inputs.
+                input.addEventListener('click', (event) => {
+                    event.stopPropagation();
                 });
             });
     }
 });
 
-// Move row with search boxes to second row
-$('#problems tfoot tr').appendTo('#problems thead');
+const footerRow = document.querySelector('#problems tfoot tr');
+const thead = document.querySelector('#problems thead');
+if (footerRow && thead) {
+    thead.appendChild(footerRow);
+}
+
+const detailsHint = document.getElementById('problem-details-hint');
+const detailsContent = document.getElementById('problem-details-content');
+
+const stripHtml = (value) => {
+    const wrapper = document.createElement('div');
+    wrapper.innerHTML = value || '';
+    return wrapper.textContent || wrapper.innerText || '';
+};
+
+const escapeHtml = (value) => {
+    const wrapper = document.createElement('div');
+    wrapper.textContent = value || '';
+    return wrapper.innerHTML;
+};
+
+const renderRowDetails = (rowApi) => {
+    const rowData = rowApi.data();
+    if (!rowData || !detailsContent) {
+        return;
+    }
+
+    const headers = table
+        .columns()
+        .header()
+        .toArray()
+        .map((header) => header.textContent.trim());
+
+    const detailsHtml = headers
+        .map((label, index) => {
+            const value = rowData[index] || '<span class="details-empty">n/a</span>';
+            return `<div class="detail-item"><dt>${escapeHtml(label)}</dt><dd>${value}</dd></div>`;
+        })
+        .join('');
+
+    const name = stripHtml(rowData[0]);
+    if (detailsHint) {
+        detailsHint.textContent = name ? `Selected: ${name}` : 'Selected row';
+    }
+
+    detailsContent.innerHTML = detailsHtml;
+};
+
+const applyColumnVisibility = (redraw = true) => {
+    document.querySelectorAll('.col-toggle').forEach((toggle) => {
+        const index = Number(toggle.getAttribute('data-column'));
+        const chip = toggle.closest('.column-chip');
+
+        if (chip) {
+            chip.classList.toggle('is-off', !toggle.checked);
+        }
+
+        table.column(index).visible(toggle.checked, false);
+    });
+
+    table.columns.adjust().draw(redraw);
+};
+
+document.querySelectorAll('.col-toggle').forEach((toggle) => {
+    toggle.addEventListener('change', () => {
+        applyColumnVisibility(false);
+    });
+});
+
+const setAllColumns = (visible) => {
+    document.querySelectorAll('.col-toggle').forEach((toggle) => {
+        toggle.checked = visible;
+    });
+
+    applyColumnVisibility(false);
+};
+
+const showAllButton = document.getElementById('show-all-columns');
+if (showAllButton) {
+    showAllButton.addEventListener('click', () => setAllColumns(true));
+}
+
+const hideAllButton = document.getElementById('hide-all-columns');
+if (hideAllButton) {
+    hideAllButton.addEventListener('click', () => setAllColumns(false));
+}
+
+const tableBody = document.querySelector('#problems tbody');
+if (tableBody) {
+    tableBody.addEventListener('click', (event) => {
+        const targetRow = event.target.closest('tr');
+        if (!targetRow) {
+            return;
+        }
+
+        const rowApi = table.row(targetRow);
+        if (!rowApi || !rowApi.any()) {
+            return;
+        }
+
+        document.querySelectorAll('#problems tbody tr.is-active').forEach((row) => {
+            row.classList.remove('is-active');
+        });
+
+        targetRow.classList.add('is-active');
+        renderRowDetails(rowApi);
+    });
+}
+
+// Honor default checkbox states (some columns start hidden).
+applyColumnVisibility(false);
 
 </script>
 
diff --git a/docs/problems.html b/docs/problems.html
index 4c2be02..768796d 100644
--- a/docs/problems.html
+++ b/docs/problems.html
@@ -1,4 +1,17 @@
-<table class="dataframe display compact display styled-table" id="problems">
+
+<section class="table-shell">
+    <div class="table-toolbar">
+        <div class="toolbar-title">Visible columns</div>
+        <div class="toolbar-actions">
+            <button type="button" class="toolbar-btn" id="show-all-columns">Show all</button>
+            <button type="button" class="toolbar-btn" id="hide-all-columns">Hide all</button>
+        </div>
+        <div class="column-controls">
+            <label class="column-chip"><input class="col-toggle" type="checkbox" data-column="0" checked><span>name</span></label><label class="column-chip"><input class="col-toggle" type="checkbox" data-column="1"><span>textual description</span></label><label class="column-chip"><input class="col-toggle" type="checkbox" data-column="2" checked><span>suite/generator/single</span></label><label class="column-chip"><input class="col-toggle" type="checkbox" data-column="3" checked><span>objectives</span></label><label class="column-chip"><input class="col-toggle" type="checkbox" data-column="4" checked><span>dimensionality</span></label><label class="column-chip"><input class="col-toggle" type="checkbox" data-column="5" checked><span>variable type</span></label><label class="column-chip"><input class="col-toggle" type="checkbox" data-column="6" checked><span>constraints</span></label><label class="column-chip"><input class="col-toggle" type="checkbox" data-column="7" checked><span>dynamic</span></label><label class="column-chip"><input class="col-toggle" type="checkbox" data-column="8" checked><span>noise</span></label><label class="column-chip"><input class="col-toggle" type="checkbox" data-column="9" checked><span>multi-fidelity</span></label><label class="column-chip"><input class="col-toggle" type="checkbox" data-column="10" checked><span>source (real-world/artificial)</span></label><label class="column-chip"><input class="col-toggle" type="checkbox" data-column="11"><span>reference</span></label><label class="column-chip"><input class="col-toggle" type="checkbox" data-column="12"><span>implementation</span></label>
+        </div>
+    </div>
+    <div class="table-wrap">
+        <table class="dataframe display compact display styled-table" id="problems">
   <thead>
     <tr style="text-align: right;">
       <th>name</th>
@@ -1188,4 +1201,12 @@
       <td><a href="https://gitlab.com/verel/pubo-importance-benchmark">https://gitlab.com/verel/pubo-importance-benchmark</a></td>
     </tr>
   </tbody>
-<tfoot><tr><th>name</th> <th>textual description</th> <th>suite/generator/single</th> <th>objectives</th> <th>dimensionality</th> <th>variable type</th> <th>constraints</th> <th>dynamic</th> <th>noise</th> <th>multi-fidelity</th> <th>source (real-world/artificial)</th> <th>reference</th> <th>implementation</th></tr> </tfoot></table>
\ No newline at end of file
+<tfoot><tr><th>name</th> <th>textual description</th> <th>suite/generator/single</th> <th>objectives</th> <th>dimensionality</th> <th>variable type</th> <th>constraints</th> <th>dynamic</th> <th>noise</th> <th>multi-fidelity</th> <th>source (real-world/artificial)</th> <th>reference</th> <th>implementation</th></tr> </tfoot></table>
+    </div>
+</section>
+
+<section class="details-shell" id="problem-details" aria-live="polite">
+    <h3 class="details-title">Problem details</h3>
+    <p class="details-hint" id="problem-details-hint">Click a table row to inspect full details.</p>
+    <dl class="details-grid" id="problem-details-content"></dl>
+</section>
diff --git a/docs/table_styles.css b/docs/table_styles.css
index 05418c8..439f38c 100644
--- a/docs/table_styles.css
+++ b/docs/table_styles.css
@@ -1,35 +1,274 @@
-/* Apply to everything */
+:root {
+    --opl-bg: #f5f7fb;
+    --opl-surface: #ffffff;
+    --opl-text: #12263a;
+    --opl-muted: #607389;
+    --opl-border: #d7e1ec;
+    --opl-accent: #0f6c8b;
+    --opl-accent-soft: #eaf4fa;
+    --opl-heading: "Segoe UI", "Trebuchet MS", sans-serif;
+    --opl-body: "Tahoma", "Verdana", sans-serif;
+}
+
 * {
-    font-family: sans-serif;
+    box-sizing: border-box;
 }
 
 body {
     margin: 1vw;
-    background-color: WhiteSmoke;
+    font-family: var(--opl-body);
+    color: var(--opl-text);
+    background:
+        radial-gradient(circle at 4% 2%, #e6edf7 0, #e6edf700 34%),
+        radial-gradient(circle at 92% 4%, #ecf3df 0, #ecf3df00 38%),
+        var(--opl-bg);
+}
+
+h2 {
+    font-family: var(--opl-heading);
+    letter-spacing: 0.01em;
+}
+
+.table-shell {
+    margin-top: 1rem;
+    border: 1px solid var(--opl-border);
+    border-radius: 16px;
+    background: var(--opl-surface);
+    box-shadow: 0 14px 30px rgba(17, 37, 61, 0.08);
+    overflow: hidden;
+}
+
+.table-toolbar {
+    display: grid;
+    gap: 0.65rem;
+    padding: 0.9rem 1rem;
+    border-bottom: 1px solid var(--opl-border);
+    background: linear-gradient(90deg, #f7fafc, #edf6fb);
+}
+
+.toolbar-title {
+    font-size: 0.78rem;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    font-weight: 700;
+    color: var(--opl-muted);
+}
+
+.toolbar-actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.45rem;
+}
+
+.toolbar-btn {
+    border: 1px solid #b8c8df;
+    background: #fff;
+    color: #1b3249;
+    border-radius: 8px;
+    padding: 0.36rem 0.62rem;
+    font-size: 0.8rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 120ms ease;
+}
+
+.toolbar-btn:hover {
+    background: #eff6fb;
+    border-color: #94adc9;
+}
+
+.toolbar-btn:active {
+    transform: translateY(1px);
+}
+
+.column-controls {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.45rem;
+}
+
+.column-chip {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.4rem;
+    padding: 0.35rem 0.65rem;
+    border-radius: 999px;
+    border: 1px solid var(--opl-border);
+    background: #fff;
+    font-size: 0.82rem;
+    cursor: pointer;
+    user-select: none;
+    transition: all 120ms ease;
+}
+
+.column-chip:hover {
+    border-color: #b8c8df;
+    background: #f7fbfd;
+}
+
+.column-chip.is-off {
+    color: var(--opl-muted);
+    background: #f1f5f9;
+}
+
+.column-chip input {
+    accent-color: var(--opl-accent);
+}
+
+.table-wrap {
+    overflow-x: auto;
+    padding: 0.45rem;
+}
+
+#problems {
+    width: 100%;
+    min-width: 980px;
+    border-collapse: separate;
+    border-spacing: 0;
+}
+
+#problems thead th {
+    background: #f9fcff;
+    color: #1d324a;
+    border-bottom: 1px solid var(--opl-border);
+    font-weight: 700;
+    white-space: nowrap;
+}
+
+#problems td {
+    vertical-align: top;
+    line-height: 1.4;
+}
+
+#problems th:first-child {
+    position: sticky;
+    left: 0;
+    z-index: 5;
+    background: #f9fcff;
+    box-shadow: 1px 0 0 0 var(--opl-border);
+}
+
+#problems td:first-child {
+    position: sticky;
+    left: 0;
+    z-index: 2;
+    background: #fcfeff;
+    box-shadow: 1px 0 0 0 var(--opl-border);
+}
+
+#problems tbody tr:nth-of-type(odd) td {
+    background: #fcfeff;
+}
+
+#problems tbody tr:nth-of-type(even) td {
+    background: #f8fbfe;
+}
+
+#problems tbody tr:hover td {
+    background: var(--opl-accent-soft);
+}
+
+#problems tbody tr:hover td:first-child {
+    background: #deedf6;
+}
+
+#problems tbody tr.is-active td {
+    background: #dceefa;
 }
 
-input[type=text] {
-  background-color: #3CBC8D;
-  color: white;
+#problems tbody tr.is-active td:first-child {
+    background: #cce5f5;
 }
 
-.styled-table {
-    font-size: 0.9em;
-    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
+#problems a {
+    color: #085f75;
 }
 
-.styled-table thead tr {
-    background-color: AntiqueWhite;
+#problems thead input {
+    width: 100%;
+    padding: 0.35rem 0.45rem;
+    border-radius: 6px;
+    border: 1px solid var(--opl-border);
+    background: #fff;
+    color: var(--opl-text);
 }
 
-.styled-table tbody tr:nth-of-type(odd) {
-    background-color: SeaShell;
+.details-shell {
+    margin-top: 0.9rem;
+    padding: 0.9rem 1rem;
+    border: 1px solid var(--opl-border);
+    border-radius: 14px;
+    background: var(--opl-surface);
+    box-shadow: 0 10px 24px rgba(17, 37, 61, 0.06);
 }
 
-.styled-table tbody tr:nth-of-type(even) {
-    background-color: Snow;
+.details-title {
+    margin: 0 0 0.3rem;
+    font-family: var(--opl-heading);
+    font-size: 1.02rem;
 }
 
-.styled-table tbody tr:hover {
-    filter: brightness(.975);
+.details-hint {
+    margin: 0 0 0.75rem;
+    color: var(--opl-muted);
+    font-size: 0.88rem;
+}
+
+.details-grid {
+    margin: 0;
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+    gap: 0.6rem;
+}
+
+.detail-item {
+    margin: 0;
+    border: 1px solid var(--opl-border);
+    border-radius: 10px;
+    padding: 0.55rem 0.65rem;
+    background: #fbfdff;
+}
+
+.detail-item dt {
+    margin: 0;
+    color: #23415e;
+    font-size: 0.74rem;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    font-weight: 700;
+}
+
+.detail-item dd {
+    margin: 0.35rem 0 0;
+    color: var(--opl-text);
+    font-size: 0.86rem;
+    line-height: 1.4;
+    overflow-wrap: anywhere;
+}
+
+.details-empty {
+    color: var(--opl-muted);
+    font-style: italic;
+}
+
+@media (max-width: 900px) {
+    body {
+        margin: 0.6rem;
+    }
+
+    .table-toolbar {
+        padding: 0.8rem;
+    }
+
+    .column-chip {
+        font-size: 0.76rem;
+    }
+
+    .details-shell {
+        padding: 0.8rem;
+    }
+
+    .details-grid {
+        grid-template-columns: 1fr;
+    }
 }
diff --git a/yaml_to_html.py b/yaml_to_html.py
index a9a219f..1bef2dd 100755
--- a/yaml_to_html.py
+++ b/yaml_to_html.py
@@ -3,6 +3,7 @@
 import pandas as pd
 import yaml
 import shutil
+from html import escape
 
 import re
 
@@ -30,8 +31,8 @@ def repl(m):
 html_index = f"{html_dir}index.html"
 
 # Load data
-with open(yaml_file) as in_file:
-    data = pd.json_normalize(yaml.safe_load(in_file))
+with open(yaml_file) as yaml_input:
+    data = pd.json_normalize(yaml.safe_load(yaml_input))
 
 # Choose desired columns
 all_columns = False
@@ -68,12 +69,51 @@ def repl(m):
 idx = table.index('</table>')
 final_table = table[:idx] + "<tfoot><tr>" + " ".join(["<th>"+ i +"</th>" for i in data.columns])+"</tr> </tfoot>" + table[idx:]
 
+default_hidden_columns = {"textual description", "reference", "implementation"}
+
+column_toggles = "".join(
+    [
+        (
+            f'<label class="column-chip">'
+            f'<input class="col-toggle" type="checkbox" data-column="{i}"'
+            f'{" checked" if col not in default_hidden_columns else ""}>'
+            f'<span>{escape(col)}</span>'
+            f'</label>'
+        )
+        for i, col in enumerate(data.columns)
+    ]
+)
+
+modern_table_block = f"""
+<section class="table-shell">
+    <div class="table-toolbar">
+        <div class="toolbar-title">Visible columns</div>
+        <div class="toolbar-actions">
+            <button type="button" class="toolbar-btn" id="show-all-columns">Show all</button>
+            <button type="button" class="toolbar-btn" id="hide-all-columns">Hide all</button>
+        </div>
+        <div class="column-controls">
+            {column_toggles}
+        </div>
+    </div>
+    <div class="table-wrap">
+        {final_table}
+    </div>
+</section>
+
+<section class="details-shell" id="problem-details" aria-live="polite">
+    <h3 class="details-title">Problem details</h3>
+    <p class="details-hint" id="problem-details-hint">Click a table row to inspect full details.</p>
+    <dl class="details-grid" id="problem-details-content"></dl>
+</section>
+"""
+
 # Write table to file
 with open(html_table, "w") as table_file:
-    table_file.write(final_table)
+    table_file.write(modern_table_block)
 
 # Merge table and scripts into HTML page
 with open(html_index, "wb") as output_file:
-    for in_file in [html_header, html_table, html_scripts, html_footer]:
-        with open(in_file, "rb") as in_file:
-            shutil.copyfileobj(in_file, output_file)
+    for part_path in [html_header, html_table, html_scripts, html_footer]:
+        with open(part_path, "rb") as part_file:
+            shutil.copyfileobj(part_file, output_file)

From 5d1c6b9910a103c86c98c191c89a51de62313de9 Mon Sep 17 00:00:00 2001
From: Dvermetten <d.vermetten@gmail.com>
Date: Tue, 21 Apr 2026 12:30:15 +0200
Subject: [PATCH 2/3] Remove gradient because Koen doesn't like it

---
 docs/table_styles.css | 2 --
 1 file changed, 2 deletions(-)

diff --git a/docs/table_styles.css b/docs/table_styles.css
index 439f38c..e352e97 100644
--- a/docs/table_styles.css
+++ b/docs/table_styles.css
@@ -19,8 +19,6 @@ body {
     font-family: var(--opl-body);
     color: var(--opl-text);
     background:
-        radial-gradient(circle at 4% 2%, #e6edf7 0, #e6edf700 34%),
-        radial-gradient(circle at 92% 4%, #ecf3df 0, #ecf3df00 38%),
         var(--opl-bg);
 }
 

From ec7576dcec93d21a3b04fc7f4082532479e306c2 Mon Sep 17 00:00:00 2001
From: Dvermetten <d.vermetten@gmail.com>
Date: Tue, 21 Apr 2026 14:01:54 +0200
Subject: [PATCH 3/3] Further separation of html from conversion script

---
 docs/index.html          |  1 -
 docs/problems.html       |  1 -
 docs/table_styles.css    |  8 ++++++++
 docs/table_template.html | 21 +++++++++++++++++++++
 yaml_to_html.py          | 36 +++++++++++-------------------------
 5 files changed, 40 insertions(+), 27 deletions(-)
 create mode 100644 docs/table_template.html

diff --git a/docs/index.html b/docs/index.html
index d39b48e..26a801d 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -24,7 +24,6 @@ <h2>OPL &ndash; Optimisation problem library</h2>
 <p>
 Submit problems and corrections on <a target="_blank" href="https://github.com/OpenOptimizationOrg/OPL/">GitHub</a> with pull requests / issues, through the <a target="_blank" href="https://docs.google.com/forms/d/e/1FAIpQLSehQp24AuFAH2j9jizDhq8K_BYgNGMKXWTMu6s-2RwEJrK59Q/viewform">Google form</a>, or by email: <a href="mailto:koen.van.der.blom@cwi.nl" itemprop="email">koen.van.der.blom@cwi.nl</a>
 </p>
-
 <section class="table-shell">
     <div class="table-toolbar">
         <div class="toolbar-title">Visible columns</div>
diff --git a/docs/problems.html b/docs/problems.html
index 768796d..d3040ea 100644
--- a/docs/problems.html
+++ b/docs/problems.html
@@ -1,4 +1,3 @@
-
 <section class="table-shell">
     <div class="table-toolbar">
         <div class="toolbar-title">Visible columns</div>
diff --git a/docs/table_styles.css b/docs/table_styles.css
index e352e97..1c53f6d 100644
--- a/docs/table_styles.css
+++ b/docs/table_styles.css
@@ -8,6 +8,7 @@
     --opl-accent-soft: #eaf4fa;
     --opl-heading: "Segoe UI", "Trebuchet MS", sans-serif;
     --opl-body: "Tahoma", "Verdana", sans-serif;
+    --opl-table-font-size: 0.86rem;
 }
 
 * {
@@ -123,6 +124,7 @@ h2 {
     min-width: 980px;
     border-collapse: separate;
     border-spacing: 0;
+    font-size: var(--opl-table-font-size);
 }
 
 #problems thead th {
@@ -136,6 +138,11 @@ h2 {
 #problems td {
     vertical-align: top;
     line-height: 1.4;
+    font-size: inherit;
+}
+
+#problems td * {
+    font-size: inherit;
 }
 
 #problems th:first-child {
@@ -189,6 +196,7 @@ h2 {
     border: 1px solid var(--opl-border);
     background: #fff;
     color: var(--opl-text);
+    font-size: inherit;
 }
 
 .details-shell {
diff --git a/docs/table_template.html b/docs/table_template.html
new file mode 100644
index 0000000..270d61f
--- /dev/null
+++ b/docs/table_template.html
@@ -0,0 +1,21 @@
+<section class="table-shell">
+    <div class="table-toolbar">
+        <div class="toolbar-title">Visible columns</div>
+        <div class="toolbar-actions">
+            <button type="button" class="toolbar-btn" id="show-all-columns">Show all</button>
+            <button type="button" class="toolbar-btn" id="hide-all-columns">Hide all</button>
+        </div>
+        <div class="column-controls">
+            __COLUMN_TOGGLES__
+        </div>
+    </div>
+    <div class="table-wrap">
+        __TABLE__
+    </div>
+</section>
+
+<section class="details-shell" id="problem-details" aria-live="polite">
+    <h3 class="details-title">Problem details</h3>
+    <p class="details-hint" id="problem-details-hint">Click a table row to inspect full details.</p>
+    <dl class="details-grid" id="problem-details-content"></dl>
+</section>
diff --git a/yaml_to_html.py b/yaml_to_html.py
index 1bef2dd..87e8cce 100755
--- a/yaml_to_html.py
+++ b/yaml_to_html.py
@@ -29,6 +29,7 @@ def repl(m):
 html_scripts = f"{html_dir}javascript.html"
 html_footer = f"{html_dir}footer.html"
 html_index = f"{html_dir}index.html"
+html_table_template = f"{html_dir}table_template.html"
 
 # Load data
 with open(yaml_file) as yaml_input:
@@ -84,33 +85,18 @@ def repl(m):
     ]
 )
 
-modern_table_block = f"""
-<section class="table-shell">
-    <div class="table-toolbar">
-        <div class="toolbar-title">Visible columns</div>
-        <div class="toolbar-actions">
-            <button type="button" class="toolbar-btn" id="show-all-columns">Show all</button>
-            <button type="button" class="toolbar-btn" id="hide-all-columns">Hide all</button>
-        </div>
-        <div class="column-controls">
-            {column_toggles}
-        </div>
-    </div>
-    <div class="table-wrap">
-        {final_table}
-    </div>
-</section>
-
-<section class="details-shell" id="problem-details" aria-live="polite">
-    <h3 class="details-title">Problem details</h3>
-    <p class="details-hint" id="problem-details-hint">Click a table row to inspect full details.</p>
-    <dl class="details-grid" id="problem-details-content"></dl>
-</section>
-"""
+with open(html_table_template, encoding="utf-8") as template_file:
+    table_template = template_file.read()
+
+table_markup = (
+    table_template
+    .replace("__COLUMN_TOGGLES__", column_toggles)
+    .replace("__TABLE__", final_table)
+)
 
 # Write table to file
-with open(html_table, "w") as table_file:
-    table_file.write(modern_table_block)
+with open(html_table, "w", encoding="utf-8") as table_file:
+    table_file.write(table_markup)
 
 # Merge table and scripts into HTML page
 with open(html_index, "wb") as output_file: