better phone

src/public/app.js

@@ -181,10 +181,12 @@ function renderList() {
     const sizeTd = document.createElement("td");
     sizeTd.className = "file-size";
     sizeTd.textContent = formatBytes(item.size);
+    sizeTd.setAttribute("data-label", "Size");
 
     const dateTd = document.createElement("td");
     dateTd.className = "file-date";
     dateTd.textContent = formatDate(item.createdAt);
+    dateTd.setAttribute("data-label", "Uploaded");
 
     const actionsTd = document.createElement("td");
     const actions = document.createElement("div");

src/public/style.css

@@ -479,12 +479,139 @@ button {
   }
 }
 
-@media (max-width: 520px) {
+@media (max-width: 640px) {
   .app {
-    padding: 0 12px 32px;
+    padding: 0 14px 36px;
   }
 
   .topbar {
+    padding: 14px 0 12px;
+    margin-bottom: 16px;
+  }
+
+  .logo {
+    width: 34px;
+    height: 34px;
+  }
+
+  .brand {
+    gap: 10px;
+    min-width: 0;
+  }
+
+  .brand-text h1 {
+    font-size: 16px;
+  }
+
+  .sub {
+    font-size: 11px;
+  }
+
+  .topbar-actions {
+    gap: 6px;
+  }
+
+  .topbar-actions .btn {
+    padding: 8px 10px;
+    font-size: 12px;
+  }
+
+  .panel {
+    padding: 16px;
+  }
+
+  .dropzone {
+    padding: 34px 16px;
+  }
+
+  .btn-block {
+    padding: 13px;
+  }
+
+  /* 16px inputs prevent iOS auto-zoom on focus */
+  .field input,
+  .url-row input {
+    font-size: 16px;
+  }
+
+  /* files table -> stacked cards */
+  .table-wrap {
+    overflow: visible;
+    border: none;
+    border-radius: 0;
+    background: transparent;
+  }
+
+  .files-table {
+    display: block;
+    min-width: 0;
+  }
+
+  .files-table thead {
+    display: none;
+  }
+
+  .files-table tbody {
+    display: block;
+  }
+
+  .files-table tr {
+    display: block;
+    background: var(--surface-2);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    padding: 12px 14px;
+    margin-bottom: 10px;
+  }
+
+  .files-table tbody tr:last-child {
+    margin-bottom: 0;
+  }
+
+  .files-table td {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    padding: 7px 0;
+    border-bottom: 1px solid var(--border);
+    font-size: 13px;
+    white-space: normal;
+  }
+
+  .files-table td:last-child {
+    border-bottom: none;
+  }
+
+  .files-table tbody tr:last-child td {
+    border-bottom: 1px solid var(--border);
+  }
+
+  .files-table tbody tr:last-child td:last-child {
+    border-bottom: none;
+  }
+
+  .files-table td[data-label]::before {
+    content: attr(data-label);
+    font-size: 11px;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    color: var(--muted);
+    flex-shrink: 0;
+  }
+
+  .file-name {
     flex-wrap: wrap;
   }
+
+  .row-actions {
+    justify-content: stretch;
+  }
+
+  .row-actions .btn {
+    flex: 1;
+    text-align: center;
+    padding: 11px 8px;
+    font-size: 13px;
+  }
 }