contact messages: messaging settings back to one line, labels above boxes

Side-by-side labels attached ambiguously and aligned with nothing;
each label now sits directly above its own box. The row bottom-aligns
so the flag selector lines up with the boxes, not the labels. Email
stays last, where the planned SMTP address joins it.
This commit is contained in:
LeoVasanko committed 2026-09-29 01:25:22 +00:00
1 parent e9702e8bce
commit a094df81b6
1 file changed
+21 -10
+21 -10
View File
@@ -807,8 +807,6 @@ onUnmounted(() => {
@input="onContactInput"
/>
</label>
</div>
<div class="block-head msg-head">
<label class="field">
<span class="field-label">email</span>
<input
@@ -959,23 +957,36 @@ onUnmounted(() => {
font-size: 1rem;
}
/* The messaging block: two labeled lines — the translatable strings
(the article editor's flag selector, button label = the enable
switch, topic) and the global email properties (the mailto recipient;
an SMTP address joins this row later). The boxes are readonly until
first interaction (+ vendor ignore attributes, and the mailto subject
is labeled "topic"): password managers offer credential autofill on
/* The messaging block: one line — the article editor's flag selector,
then the labeled boxes (button label = the enable switch, topic; the
mailto email last, where the planned SMTP address joins it). Labels
sit directly above their own box so there is no doubt what they
describe, and the row bottom-aligns so the flag lines up with the
boxes, not the labels. The boxes are readonly until first
interaction (+ vendor ignore attributes, and the mailto subject is
labeled "topic"): password managers offer credential autofill on
them no matter the autocomplete setting. */
.msg-head {
align-items: end;
flex-wrap: wrap;
}
.msg-head .field {
flex: 1 1 10rem;
min-width: 9rem;
flex: 1 1 8rem;
flex-direction: column;
align-items: stretch;
gap: 0.15rem;
min-width: 7rem;
}
/* The shared 5rem label track is for side-by-side labels; stacked
labels size to their text. */
.msg-head .field > .field-label {
min-width: 0;
}
.msg-head .text-input {
flex: none;
font-size: 0.85rem;
}