mobile responsiveness pass

2 files changed, 128 insertions, 0 deletions

diff --git a/174bg/manager/public/index.html b/174bg/manager/public/index.html
index d92abb2..71bc262 100644
--- a/174bg/manager/public/index.html
+++ b/174bg/manager/public/index.html
@@ -437,21 +437,26 @@
         const tr = document.createElement("tr");
 
         const tdDate = document.createElement("td");
+        tdDate.dataset.label = "Date";
         tdDate.textContent = rec.created
           ? new Date(rec.created).toLocaleString()
           : "—";
 
         const tdSender = document.createElement("td");
+        tdSender.dataset.label = "Sender";
         tdSender.textContent = memberLabel(rec, "sender");
 
         const tdRecipient = document.createElement("td");
+        tdRecipient.dataset.label = "Recipient";
         tdRecipient.textContent = memberLabel(rec, "recipient");
 
         const tdUec = document.createElement("td");
         tdUec.className = "uec";
+        tdUec.dataset.label = "UEC";
         tdUec.textContent = Number(rec.uec ?? 0).toLocaleString();
 
         const tdNote = document.createElement("td");
+        tdNote.dataset.label = "Note";
         tdNote.textContent = rec.note ?? "";
 
         tr.append(tdDate, tdSender, tdRecipient, tdUec, tdNote);
diff --git a/174bg/manager/public/theme.css b/174bg/manager/public/theme.css
index 3f1d9b1..838629e 100644
--- a/174bg/manager/public/theme.css
+++ b/174bg/manager/public/theme.css
@@ -258,3 +258,126 @@ input[type="checkbox"] {
   font-weight: 700;
   letter-spacing: 0.02em;
 }
+
+/* Tables can scroll horizontally if they ever overflow ------------- */
+#preferences,
+#ledger {
+  overflow-x: auto;
+}
+
+/* ================================================================= */
+/* Responsive — tablet                                               */
+/* ================================================================= */
+@media (max-width: 640px) {
+  body {
+    padding: 1.5rem 0.85rem 3rem;
+  }
+
+  #anonymous,
+  #required-info,
+  #preferences,
+  #ledger,
+  #welcome {
+    padding: 1rem 1.1rem;
+    border-radius: 12px;
+  }
+
+  #welcome {
+    gap: 0.75rem;
+  }
+
+  #welcome-avatar {
+    width: 2.75rem;
+    height: 2.75rem;
+  }
+
+  #welcome-text {
+    font-size: 1.05rem;
+  }
+
+  /* Stack required-info rows so long values don't get squeezed */
+  #required-info > div:not(:first-child):not(#profile-warning) {
+    flex-direction: column;
+    gap: 0.1rem;
+    word-break: break-word;
+  }
+
+  button {
+    width: 100%;
+  }
+
+  #preferences thead th:first-child,
+  #preferences tbody td:first-child {
+    white-space: normal;
+  }
+}
+
+/* ================================================================= */
+/* Responsive — phone: turn the ledger into stacked cards            */
+/* ================================================================= */
+@media (max-width: 520px) {
+  #ledger {
+    overflow-x: visible;
+  }
+
+  #ledger table,
+  #ledger thead,
+  #ledger tbody,
+  #ledger tr,
+  #ledger td {
+    display: block;
+    width: 100%;
+  }
+
+  /* Hide the table header row; labels come from data-label instead */
+  #ledger thead {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip: rect(0 0 0 0);
+    white-space: nowrap;
+  }
+
+  #ledger tbody tr {
+    margin-bottom: 0.85rem;
+    border: 1px solid var(--panel-border);
+    border-radius: 10px;
+    padding: 0.35rem 0.6rem;
+    background: var(--row-alt);
+  }
+
+  #ledger tbody tr:nth-child(even) {
+    background: rgba(56, 189, 248, 0.08);
+  }
+
+  #ledger tbody td {
+    display: flex;
+    justify-content: space-between;
+    align-items: baseline;
+    gap: 1rem;
+    padding: 0.4rem 0.25rem;
+    border-bottom: 1px solid rgba(56, 189, 248, 0.1);
+    text-align: right;
+    word-break: break-word;
+  }
+
+  #ledger tbody tr td:last-child {
+    border-bottom: none;
+  }
+
+  #ledger tbody td::before {
+    content: attr(data-label);
+    font-family: "Orbitron", sans-serif;
+    font-size: 0.62rem;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    color: var(--accent);
+    text-align: left;
+    flex-shrink: 0;
+  }
+
+  #ledger td.uec {
+    text-align: right;
+  }
+}