Unify tables and listings

assets/style.css

@@ -257,18 +257,6 @@ main > h2 {
     margin: var(--space-3) 0;
 }
 .content pre code { background: none; padding: 0; }
-.content table {
-    width: 100%;
-    border-collapse: collapse;
-    margin: var(--space-3) 0;
-    font-size: 0.9rem;
-}
-.content th, .content td {
-    border: var(--border);
-    padding: 0.4rem var(--space-3);
-    text-align: left;
-}
-.content th { background: var(--bg-panel); color: var(--text); }
 .content hr { margin: var(--space-5) 0; }
 .content img { max-width: 100%; }
 .content li:has(> input.task-checkbox:checked) {
@@ -288,22 +276,38 @@ main > h2 {
 }
 .heading-anchor .dropdown-toggle:hover { color: var(--primary-hover); }
 
-/* === Listing rows === */
-.listing-item {
-    display: flex;
-    align-items: center;
-    gap: var(--space-3);
-    padding: 0.6rem var(--space-4);
-    font-size: 0.95rem;
+/* === Data tables ===
+   Shared style for the file listing, search-suggestion dropdown, and
+   markdown content tables. .data-table-grid adds per-cell borders + a
+   header band for content (markdown) tables. */
+.data-table { width: 100%; border-collapse: collapse; }
+.data-table th,
+.data-table td { padding: 0.4rem var(--space-3); text-align: left; }
+.data-table:not(.data-table-grid) tbody tr + tr { border-top: var(--border); }
+.data-table:not(.data-table-grid) tbody tr:hover,
+.data-table tr.is-active { background: var(--bg-panel-hover); }
+.data-table tbody tr.is-empty,
+.data-table tbody tr.is-empty:hover {
+    color: var(--text-muted);
+    background: none;
+    cursor: default;
 }
-.listing-item + .listing-item { border-top: var(--border); }
-.listing-item:hover { background: var(--bg-panel-hover); }
-.listing-item .icon { width: 1.25rem; text-align: center; flex-shrink: 0; }
-.listing-item a { flex: 1; overflow-wrap: anywhere; color: inherit; }
-.listing-item .meta {
+.data-table-grid th,
+.data-table-grid td { border: var(--border); }
+.data-table-grid th { background: var(--bg-panel); color: var(--text); }
+.content .data-table-grid { margin: var(--space-3) 0; font-size: 0.9rem; }
+
+/* File listing rows */
+.list-item { font-size: 0.95rem; }
+.list-item > td { padding: 0.6rem var(--space-4); }
+.list-item td.icon { width: 1.25rem; text-align: center; }
+.list-item td.name { overflow-wrap: anywhere; }
+.list-item td.name a { color: inherit; display: block; }
+.list-item td.meta {
     color: var(--text-muted);
     font-size: 0.8rem;
     white-space: nowrap;
+    text-align: right;
 }
 
 /* === Dropdown menu === */
@@ -339,27 +343,12 @@ main > h2 {
     display: none;
 }
 .suggest-dropdown.is-open { display: block; }
-.suggest-row {
-    display: flex;
-    flex-direction: column;
-    gap: 0.1rem;
-    padding: 0.4rem 0.6rem;
-    cursor: pointer;
-    border: none;
-    background: none;
-    color: inherit;
-    font: inherit;
-    text-align: left;
-    width: 100%;
-}
-.suggest-row + .suggest-row { border-top: var(--border); }
-.suggest-row:hover,
-.suggest-row.is-active { background: var(--bg-panel-hover); }
-.suggest-row.is-empty { color: var(--text-muted); cursor: default; }
-.suggest-row.is-empty:hover { background: none; }
+.suggest-row { cursor: pointer; }
+.suggest-row > td { padding: 0.4rem 0.6rem; }
+.suggest-name, .suggest-path { display: block; }
 .suggest-name { color: var(--text); }
-.suggest-path { color: var(--text-muted); font-size: 0.8rem; }
-.suggest-footer { color: var(--link); font-size: var(--font-sm); }
+.suggest-path { color: var(--text-muted); font-size: 0.8rem; margin-top: 0.1rem; }
+.suggest-footer > td { color: var(--link); font-size: var(--font-sm); }
 
 /* === Editor toolbar === */
 .editor-toolbar {
@@ -650,6 +639,16 @@ aside.sidebar:empty { display: none; }
     .modal-backdrop { padding: var(--space-2); align-items: flex-start; }
     .modal { max-width: none; margin-top: var(--space-4); }
     .modal .panel-header { cursor: default; }
-    .listing-item { flex-wrap: wrap; }
-    .listing-item .meta { flex-basis: 100%; padding-left: calc(1.25rem + var(--space-3)); }
+    /* On mobile, switch .list-item from a table row to a CSS grid so the
+       meta cell wraps to its own line indented under the name. */
+    .list-item {
+        display: grid;
+        grid-template-columns: 1.25rem 1fr;
+        gap: 0 var(--space-3);
+        padding: 0.6rem var(--space-4);
+    }
+    .list-item > td { padding: 0; }
+    .list-item td.icon { grid-row: 1; grid-column: 1; }
+    .list-item td.name { grid-row: 1; grid-column: 2; }
+    .list-item td.meta { grid-row: 2; grid-column: 2; text-align: left; }
 }