From bdb418f613541bab998ba335175c3db87db0e9fd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ana=C3=AFs=20Saraiva?=
 <53227802+Kisakay@users.noreply.github.com>
Date: Sat, 15 Aug 2026 11:42:47 +0200
Subject: [PATCH] better phone

---
 src/public/app.js    |   2 +
 src/public/style.css | 131 ++++++++++++++++++++++++++++++++++++++++++-
 2 files changed, 131 insertions(+), 2 deletions(-)

diff --git a/src/public/app.js b/src/public/app.js
index 0ba5612..be7d60d 100644
--- a/src/public/app.js
+++ b/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");
diff --git a/src/public/style.css b/src/public/style.css
index 6f86879..b910a4d 100644
--- a/src/public/style.css
+++ b/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;
+  }
 }
\ No newline at end of file