refactor(ui): replace entry table with flexbox layout

crates/archivr-server/static/app.js

@@ -82,7 +82,7 @@ async function getJson(url) {
 }
 
 function appendCell(row, text, className) {
-  const cell = document.createElement("td");
+  const cell = document.createElement("div");
   if (className) cell.className = className;
   cell.textContent = text;
   row.append(cell);
@@ -133,30 +133,30 @@ function renderEntries() {
   }
 
   for (const entry of state.entries) {
-    const row = document.createElement("tr");
+    const row = document.createElement("div");
     row.tabIndex = 0;
     row.dataset.entryUid = entry.entry_uid;
     if (entry.entry_uid === state.selectedEntryUid) {
       row.classList.add("is-selected");
     }
 
-    appendCell(row, formatTimestamp(entry.archived_at));
+    appendCell(row, formatTimestamp(entry.archived_at), "col-added");
 
-    const titleCell = appendCell(row, "");
+    const titleCell = appendCell(row, "", "col-title");
     titleCell.append(sourceIcon(entry.source_kind));
     const title = document.createElement("span");
     title.className = "entry-title";
     title.textContent = valueText(entry.title) || valueText(entry.entry_uid);
     titleCell.append(title);
 
-    const typeCell = appendCell(row, "");
+    const typeCell = appendCell(row, "", "col-type");
     const type = document.createElement("span");
     type.className = "type-pill";
     type.textContent = valueText(entry.entity_kind);
     typeCell.append(type);
 
-    appendCell(row, formatBytes(entry.total_artifact_bytes));
-    appendCell(row, valueText(entry.original_url), "url-cell");
+    appendCell(row, formatBytes(entry.total_artifact_bytes), "col-size");
+    appendCell(row, valueText(entry.original_url), "url-cell col-url");
 
     row.addEventListener("click", () => selectEntry(entry));
     row.addEventListener("keydown", (event) => {
@@ -308,11 +308,11 @@ async function loadRuns() {
   runsBody.innerHTML = "";
   for (const run of runs) {
     const row = document.createElement("tr");
-    appendCell(row, valueText(run.started_at));
-    appendCell(row, valueText(run.status));
-    appendCell(row, String(run.requested_count));
-    appendCell(row, String(run.completed_count));
-    appendCell(row, String(run.failed_count));
+    for (const val of [run.started_at, run.status, run.requested_count, run.completed_count, run.failed_count]) {
+      const td = document.createElement("td");
+      td.textContent = valueText(String(val ?? ""));
+      row.append(td);
+    }
     runsBody.append(row);
   }
 }

crates/archivr-server/static/index.html

@@ -27,25 +27,16 @@
         </div>
 
         <section id="archive-view" class="view is-active">
-          <table class="entry-table">
-            <colgroup>
-              <col class="col-added">
-              <col class="col-title">
-              <col class="col-type">
-              <col class="col-size">
-              <col class="col-url">
-            </colgroup>
-            <thead>
-              <tr>
-                <th>Added</th>
-                <th>Title</th>
-                <th>Type</th>
-                <th>Size</th>
-                <th>Original URL</th>
-              </tr>
-            </thead>
-            <tbody id="entries-body"></tbody>
-          </table>
+          <div class="entry-table">
+            <div class="entry-header-row">
+              <div class="col-added">Added</div>
+              <div class="col-title">Title</div>
+              <div class="col-type">Type</div>
+              <div class="col-size">Size</div>
+              <div class="col-url">Original URL</div>
+            </div>
+            <div id="entries-body"></div>
+          </div>
         </section>
 
         <section id="runs-view" class="view">

crates/archivr-server/static/styles.css

@@ -136,12 +136,86 @@ select {
 
 .entry-table {
   width: 100%;
-  border-collapse: collapse;
-  table-layout: fixed;
   font-size: 13px;
+  overflow: auto;
 }
 
-.entry-table th {
+.entry-header-row {
+  display: flex;
+  align-items: stretch;
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  background: #ded5c7;
+  border-bottom: 1px solid #cec4b5;
+  color: #5d625e;
+  font-size: 11px;
+  text-transform: uppercase;
+}
+
+.entry-header-row > div {
+  padding: 10px;
+  flex-shrink: 0;
+}
+
+#entries-body > div {
+  display: flex;
+  align-items: baseline;
+  cursor: default;
+  border-bottom: 1px solid var(--line-soft);
+}
+
+#entries-body > div > div {
+  padding: 10px;
+  flex-shrink: 0;
+  overflow: hidden;
+}
+
+#entries-body > div:nth-child(even) {
+  background: #f2ede5;
+}
+
+#entries-body > div:nth-child(odd) {
+  background: var(--paper-3);
+}
+
+#entries-body > div.is-selected {
+  background: #eee2d2;
+  outline: 2px solid var(--accent);
+  outline-offset: -2px;
+}
+
+.col-added {
+  width: 168px;
+}
+
+.col-title {
+  flex: 1 1 0;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.col-type {
+  width: 120px;
+}
+
+.col-size {
+  width: 100px;
+}
+
+.col-url {
+  flex: 0 0 30%;
+  min-width: 0;
+  overflow: hidden;
+}
+
+/* Runs table (still a <table>) */
+#runs-view .entry-table {
+  border-collapse: collapse;
+  table-layout: auto;
+}
+
+#runs-view .entry-table th {
   position: sticky;
   top: 0;
   z-index: 1;
@@ -154,49 +228,14 @@ select {
   text-transform: uppercase;
 }
 
-.entry-table td {
+#runs-view .entry-table td {
   padding: 10px;
   border-bottom: 1px solid var(--line-soft);
   vertical-align: top;
 }
 
-.entry-table tr:nth-child(even) td {
-  background: #f2ede5;
-}
-
-.entry-table tr:nth-child(odd) td {
-  background: var(--paper-3);
-}
-
-.entry-table tr {
-  cursor: default;
-}
-
-.entry-table tr.is-selected td {
-  background: #eee2d2;
-  border-top: 2px solid var(--accent);
-  border-bottom: 2px solid var(--accent);
-}
-
-.col-added {
-  width: 178px;
-}
-
-.col-title {
-  width: 38%;
-}
-
-.col-type {
-  width: 130px;
-}
-
-.col-size {
-  width: 110px;
-}
-
-.col-url {
-  width: 34%;
-}
+#runs-view .entry-table tr:nth-child(even) td { background: #f2ede5; }
+#runs-view .entry-table tr:nth-child(odd) td { background: var(--paper-3); }
 
 .entry-title {
   color: var(--link);