Make mobile-friendly

web/js/issues.js

@@ -310,7 +310,7 @@ function renderAddressedTable(issues, container) {
     }
 
     const table = document.createElement('table');
-    table.className = 'issues-table';
+    table.className = 'issues-table issue-list-table';
 
     const thead = document.createElement('thead');
     const headerRow = document.createElement('tr');
@@ -350,6 +350,7 @@ function renderAddressedTable(issues, container) {
         tbody.appendChild(row);
     });
     table.appendChild(tbody);
+    addTableCellLabels(table);
     container.appendChild(table);
 }
 
@@ -361,7 +362,7 @@ function renderKnownList(issues, container) {
     }
 
     const table = document.createElement('table');
-    table.className = 'issues-table';
+    table.className = 'issues-table issue-list-table';
 
     const thead = document.createElement('thead');
     const headerRow = document.createElement('tr');
@@ -397,9 +398,28 @@ function renderKnownList(issues, container) {
         tbody.appendChild(row);
     });
     table.appendChild(tbody);
+    addTableCellLabels(table);
     container.appendChild(table);
 }
 
+function addTableCellLabels(table) {
+    const headers = Array.from(table.querySelectorAll('thead th')).map(th => th.textContent.trim());
+    if (headers.length === 0) {
+        return;
+    }
+
+    table.querySelectorAll('tbody tr').forEach(row => {
+        Array.from(row.children).forEach((cell, idx) => {
+            if (!(cell instanceof HTMLElement)) {
+                return;
+            }
+
+            const label = headers[idx] || `Column ${idx + 1}`;
+            cell.setAttribute('data-label', label);
+        });
+    });
+}
+
 function dedupeAddressedIssues(issues) {
     return dedupeIssues(issues, 'addressedIn');
 }
@@ -572,6 +592,7 @@ function addIssueTableClasses(html) {
     const doc = new DOMParser().parseFromString(String(html || ''), 'text/html');
     doc.querySelectorAll('table').forEach(table => {
         table.classList.add('issues-table');
+        addTableCellLabels(table);
     });
     return doc.body.innerHTML;
 }

web/process.html

@@ -71,10 +71,23 @@
             gap: 8px;
         }
         .checkbox-label {
+        main {
+            padding: 12px;
+        }
             display: flex;
             align-items: center;
             font-weight: normal;
             margin: 0;
+            .form-section,
+            .preview-section {
+                padding: 14px;
+            }
+            .button-group {
+                flex-direction: column;
+            }
+            button {
+                width: 100%;
+            }
         }
         .checkbox-label input[type="checkbox"] {
             width: auto;

web/styles.css

@@ -285,3 +285,147 @@ li {
 li:hover {
     background-color: #f0f0f0;
 }
+
+@media (max-width: 900px) {
+    .container {
+        flex-direction: column;
+        gap: 12px;
+        padding: 12px;
+    }
+
+    .sidebar {
+        flex: 1 1 auto;
+        width: 100%;
+    }
+
+    .tree-children {
+        margin-left: 12px;
+    }
+
+    .issues-table {
+        font-size: 13px;
+    }
+
+    .issues-table th,
+    .issues-table td {
+        padding: 6px 8px;
+    }
+
+    .issues-table .issue-id-col {
+        min-width: 120px;
+    }
+
+    .issues-table .issue-version-col {
+        min-width: 150px;
+    }
+}
+
+@media (max-width: 600px) {
+    header {
+        padding: 14px;
+    }
+
+    h1 {
+        font-size: 1.25rem;
+    }
+
+    .top-links {
+        gap: 12px;
+    }
+
+    .issue-filters {
+        flex-wrap: wrap;
+        gap: 8px;
+    }
+
+    .issue-filters label {
+        min-height: 32px;
+    }
+}
+
+@media (max-width: 700px) {
+    #addressed-issues,
+    #known-issues {
+        overflow-x: visible;
+    }
+
+    .issue-list-table {
+        border: 0;
+        background: transparent;
+    }
+
+    .issue-list-table thead {
+        display: none;
+    }
+
+    .issue-list-table tbody {
+        display: grid;
+        gap: 10px;
+    }
+
+    .issue-list-table tbody tr {
+        display: grid;
+        grid-template-columns: minmax(0, max-content) minmax(0, 1fr);
+        column-gap: 6px;
+        row-gap: 4px;
+        border: 1px solid #ddd;
+        border-radius: 8px;
+        background-color: #fff;
+        padding: 8px 10px;
+    }
+
+    .issue-list-table tbody tr:hover {
+        background-color: #fff;
+    }
+
+    .issue-list-table tbody td {
+        display: block;
+        border: 0;
+        padding: 0;
+    }
+
+    .issue-list-table tbody td::before {
+        content: none;
+    }
+
+    .issue-list-table .issue-id-col,
+    .issue-list-table .issue-version-col {
+        width: auto;
+        min-width: 0;
+    }
+
+    .issue-list-table .issue-id-col {
+        grid-column: 1;
+        grid-row: 1;
+        font-weight: 700;
+        white-space: nowrap;
+    }
+
+    .issue-list-table .issue-version-col {
+        grid-column: 2;
+        grid-row: 1;
+        white-space: normal;
+        overflow-wrap: anywhere;
+        word-break: break-word;
+    }
+
+    .issue-list-table .issue-version-col::before {
+        content: attr(data-label) " ";
+        color: #445566;
+        font-weight: 600;
+    }
+
+    .issue-list-table tbody td:last-child {
+        grid-column: 1 / -1;
+        grid-row: 2;
+        margin-top: 1px;
+        overflow-wrap: anywhere;
+        word-break: break-word;
+    }
+
+    .issues-table td ul,
+    .issues-table td ol {
+        margin: 4px 0 0;
+        padding-left: 18px;
+    }
+}