Make mobile-friendly

2026-04-02 15:36:18 -05:00
parent 64861ddcfa
commit 0e7f23ec3a
3 changed files with 180 additions and 2 deletions
@@ -284,4 +284,148 @@ 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;
+    }
 }