contact messages: messaging settings on two labeled lines

Placeholders no longer double as help text: each box gets a real
wrapping label like the other settings sections. Line one groups the
translatable strings (flag selector, button label, topic), line two the
global email properties (mailto recipient; the planned SMTP address
joins it). Remaining placeholders are samples/format hints only.

frontend/src/SiteEditor.vue

@@ -775,46 +775,57 @@ onUnmounted(() => {
           :options="contactLangOptions"
           title="Language of the label/topic strings (auto translators fill these too; this edits the manual override)"
         />
-        <input
-          v-model="contactLabel"
-          class="text-input"
-          :placeholder="translating ? contactLabelOrig : 'Contact us'"
-          title="Messaging: the {contact:} button label and visitor dialog title — empty disables messaging"
-          :readonly="pmGuard"
-          data-1p-ignore
-          data-lpignore="true"
-          data-bwignore
-          @pointerdown="pmUnlock"
-          @focus="pmUnlock"
-          @input="onContactInput"
-        />
-        <input
-          v-model="contactEmail"
-          class="text-input"
-          placeholder="email"
-          title="Contact email — a mailto link in the visitor dialog, revealed only after the proof of work is solved (empty = no link)"
-          :disabled="!!translating"
-          :readonly="pmGuard"
-          data-1p-ignore
-          data-lpignore="true"
-          data-bwignore
-          @pointerdown="pmUnlock"
-          @focus="pmUnlock"
-          @input="debounce('contact-email', () => saveSettings())"
-        />
-        <input
-          v-model="contactSubject"
-          class="text-input"
-          :placeholder="translating ? contactSubjectOrig : 'topic'"
-          title="Topic for the mailto link (empty = the label)"
-          :readonly="pmGuard"
-          data-1p-ignore
-          data-lpignore="true"
-          data-bwignore
-          @pointerdown="pmUnlock"
-          @focus="pmUnlock"
-          @input="onContactInput"
-        />
+        <label class="field">
+          <span class="field-label">button label</span>
+          <input
+            v-model="contactLabel"
+            class="text-input"
+            :placeholder="translating ? contactLabelOrig : 'Contact us'"
+            title="Messaging: the {contact:} button label and visitor dialog title — empty disables messaging"
+            :readonly="pmGuard"
+            data-1p-ignore
+            data-lpignore="true"
+            data-bwignore
+            @pointerdown="pmUnlock"
+            @focus="pmUnlock"
+            @input="onContactInput"
+          />
+        </label>
+        <label class="field">
+          <span class="field-label">topic</span>
+          <input
+            v-model="contactSubject"
+            class="text-input"
+            :placeholder="translating ? contactSubjectOrig : ''"
+            title="Topic for the mailto link (empty = the label)"
+            :readonly="pmGuard"
+            data-1p-ignore
+            data-lpignore="true"
+            data-bwignore
+            @pointerdown="pmUnlock"
+            @focus="pmUnlock"
+            @input="onContactInput"
+          />
+        </label>
+      </div>
+      <div class="block-head msg-head">
+        <label class="field">
+          <span class="field-label">email</span>
+          <input
+            v-model="contactEmail"
+            class="text-input"
+            placeholder="name@example.com"
+            title="Contact email — a mailto link in the visitor dialog, revealed only after the proof of work is solved (empty = no link)"
+            :disabled="!!translating"
+            :readonly="pmGuard"
+            data-1p-ignore
+            data-lpignore="true"
+            data-bwignore
+            @pointerdown="pmUnlock"
+            @focus="pmUnlock"
+            @input="debounce('contact-email', () => saveSettings())"
+          />
+        </label>
       </div>
     </section>
 
@@ -948,19 +959,23 @@ onUnmounted(() => {
   font-size: 1rem;
 }
 
-/* The messaging block: one line — the article editor's flag selector,
-   then small text boxes (label = the enable switch, email, topic). 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. */
+/* 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
+   them no matter the autocomplete setting. */
 .msg-head {
   flex-wrap: wrap;
 }
 
+.msg-head .field {
+  flex: 1 1 10rem;
+  min-width: 9rem;
+}
+
 .msg-head .text-input {
-  flex: 1 1 7rem;
-  min-width: 5rem;
   font-size: 0.85rem;
 }