contacts edit: a handle's fields stack on a phone
Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01U77d1jrGYSKCTjsYWetd5d
change
commit 6288386000dac8162b64055ce9cd34362bfba266
author Claude <noreply@anthropic.com>
date
parent 45c8124b
diff --git a/public/admin.css b/public/admin.css
index a94ae28..f5bd277 100644
--- a/public/admin.css
+++ b/public/admin.css
@@ -253,8 +253,11 @@
 /* A handle row's two fields — service and handle — on one line in
    the value column: the service names what the handle is, so the two
    read as one value, the birthday row's reading. The service is the
-   shorter word and takes the narrower share; both shed their floor so
-   the pair fits a phone's value column rather than widening it. */
+   shorter word and takes the narrower share. On a phone the value
+   column held each field to a stub that clipped its text, so below
+   the date row's own threshold (27rem of row, asked of the row for
+   that rule's reason, below) the pair stacks, the service over the
+   handle, each the column's full width. */
 .card-body form.field-stack .field > .handle-row {
   display: flex;
   gap: var(--gl-space-2xs);
@@ -267,6 +270,17 @@
 .card-body form.field-stack .field > .handle-row > input:last-child {
   flex-grow: 2;
 }
+.card-body form.field-stack > .field:has(> .handle-row) {
+  container-type: inline-size;
+}
+@container (width < 27rem) {
+  .card-body form.field-stack .field > .handle-row {
+    flex-direction: column;
+  }
+  .card-body form.field-stack .field > .handle-row > input {
+    flex: none;
+  }
+}
 
 /* The date line breaks in two when its row cannot hold a whole
    date: a month name, two year boxes, and the two icon buttons need