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:
1 parent
e9702e8bce
commit
a094df81b6
1 file changed
+21
-10
+21
-10
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
Reference in new issue
Block a user