contact messages: center the flag with the messaging boxes, clearer labels

The flag selector now sits in its own column under an empty label
spacer and centers against the input row (the row stretches to one
height). Labels renamed: contact button label / email subject / our
email.

frontend/src/SiteEditor.vue

@@ -770,13 +770,16 @@ onUnmounted(() => {
 
     <section class="block">
       <div class="block-head msg-head">
-        <LangSelect
-          v-model="lang"
-          :options="contactLangOptions"
-          title="Language of the label/topic strings (auto translators fill these too; this edits the manual override)"
-        />
+        <div v-if="contactLangOptions.length > 1" class="field msg-flag">
+          <span class="field-label" aria-hidden="true"></span>
+          <LangSelect
+            v-model="lang"
+            :options="contactLangOptions"
+            title="Language of the label/subject strings (auto translators fill these too; this edits the manual override)"
+          />
+        </div>
         <label class="field">
-          <span class="field-label">button label</span>
+          <span class="field-label">contact button label</span>
           <input
             v-model="contactLabel"
             class="text-input"
@@ -792,12 +795,12 @@ onUnmounted(() => {
           />
         </label>
         <label class="field">
-          <span class="field-label">topic</span>
+          <span class="field-label">email subject</span>
           <input
             v-model="contactSubject"
             class="text-input"
             :placeholder="translating ? contactSubjectOrig : ''"
-            title="Topic for the mailto link (empty = the label)"
+            title="Subject line for the mailto link (empty = the button label)"
             :readonly="pmGuard"
             data-1p-ignore
             data-lpignore="true"
@@ -808,7 +811,7 @@ onUnmounted(() => {
           />
         </label>
         <label class="field">
-          <span class="field-label">email</span>
+          <span class="field-label">our email</span>
           <input
             v-model="contactEmail"
             class="text-input"
@@ -958,16 +961,16 @@ onUnmounted(() => {
 }
 
 /* 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. */
+   then the labeled boxes (contact button label = the enable switch,
+   email subject; the mailto "our email" last, where the planned SMTP
+   address joins it). Labels sit directly above their own box; the row
+   stretches so all columns share one height and the flag, in its own
+   column under an empty label spacer, centers against the boxes. The
+   boxes are readonly until first interaction (+ vendor ignore
+   attributes): password managers offer credential autofill on them no
+   matter the autocomplete setting. */
 .msg-head {
-  align-items: end;
+  align-items: stretch;
   flex-wrap: wrap;
 }
 
@@ -979,6 +982,18 @@ onUnmounted(() => {
   min-width: 7rem;
 }
 
+.msg-head .msg-flag {
+  flex: 0 0 auto;
+}
+
+/* The flag fills its column below the label spacer, so centering inside
+   it centers against the input row exactly. */
+.msg-flag .lang-select {
+  flex: 1;
+  display: flex;
+  align-items: center;
+}
+
 /* The shared 5rem label track is for side-by-side labels; stacked
    labels size to their text. */
 .msg-head .field > .field-label {