diff --git a/frontend/src/SiteEditor.vue b/frontend/src/SiteEditor.vue
index a37646e..e7547e1 100644
--- a/frontend/src/SiteEditor.vue
+++ b/frontend/src/SiteEditor.vue
@@ -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;
 }