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
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