contacts edit: a row's label reads as its caption until clicked
At rest the label field is the caption it replaced, with no box and
an ellipsis for a long word; the box comes back on hover and while
the field has focus.
Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0138CM3cNKnfJZ8LbDsCPRaf
diff --git a/public/admin.css b/public/admin.css
index 00ef738..b7d3d44 100644
--- a/public/admin.css
+++ b/public/admin.css
@@ -252,12 +252,23 @@
/* A row's label field (Admin::ContactsEdit#label_field) sits in the
type column the caption held and the record card's key still holds,
- so it reads in the caption's register — Gloss's .field type, mono
- uppercase at the step below the value — inside the box that says it
- can be edited (docs/plans/2026-10-22-a-row-edits-its-label.md). The
- word is stored as typed; only its showing is uppercase. */
+ and at rest it is that caption: Gloss's .field type, mono uppercase
+ at the step below the value, with no box around it — the row reads
+ as the record does (docs/DESIGN.md, "Alignment is the layout"). The
+ box comes back under the pointer, saying the word can be changed,
+ and stays while the field has focus, which a click gives it: editing
+ on click is the input's own behavior, and markup's job here (see
+ Admin::Layout). A word wider than the column ends in an ellipsis
+ until then. The word is stored as typed; only its showing is
+ uppercase, and an unlabeled row's placeholder, the kind, reads in
+ the caption's color rather than a hint's. */
.card-body form.field-stack > .field > .row-label {
padding-block: var(--gl-space-3xs);
+ padding-inline: 0;
+ border-color: transparent;
+ background: transparent;
+ text-overflow: ellipsis;
+ cursor: text;
font-family: var(--gl-font-mono);
font-size: var(--gl-step--2);
font-weight: 500;
@@ -265,6 +276,22 @@
letter-spacing: 0.06em;
color: var(--gl-color-text-secondary);
}
+.card-body form.field-stack > .field > .row-label::placeholder {
+ color: var(--gl-color-text-secondary);
+}
+.card-body form.field-stack > .field > .row-label:is(:hover, :focus) {
+ padding-inline: calc(var(--gl-space-xs) - 1px);
+ border-color: var(--gl-color-border-default);
+ background: var(--gl-color-surface-card);
+}
+.card-body form.field-stack > .field > .row-label:focus {
+ border-color: var(--gl-color-accent);
+}
+/* Chrome's arrow for the list would take a third of a 6rem column
+ from the word; the list still opens on a click or a keystroke. */
+.card-body form.field-stack > .field > .row-label::-webkit-calendar-picker-indicator {
+ display: none !important;
+}
/* 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