From a094df81b695cfb74ea9de214291cbe0e0f4b47d Mon Sep 17 00:00:00 2001
From: Leo Vasanko <git@vasanko.com>
Date: Tue, 29 Sep 2026 01:25:22 +0000
Subject: [PATCH] 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.
---
 frontend/src/SiteEditor.vue | 31 +++++++++++++++++++++----------
 1 file changed, 21 insertions(+), 10 deletions(-)

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;
 }