contact messages: fix icon size specificity, scroll to end on open

.editor-pens button's font: inherit out-specified .contact-icon; scope the size bump to .editor-pens .contact-icon. The visitor panel only ever existed while open (the overlay is v-if'd), so its state.open watch never fired: scroll to the newest message on mount instead, with the message-count watch covering sent/received while open.

frontend/src/ContactPanel.vue

@@ -4,7 +4,7 @@
 // composer shared with the admin inbox. state is contact-main's reactive
 // store ({open, mode, thread, unread, ...}). The overlay shell (backdrop,
 // dialog frame, close) is ContactOverlay.vue.
-import { computed, nextTick, reactive, ref, watch } from 'vue'
+import { computed, nextTick, onMounted, reactive, ref, watch } from 'vue'
 import { formatWhen } from './analytics/format.js'
 import Composer from './Composer.vue'
 
@@ -21,8 +21,11 @@ async function scrollDown() {
   if (scroll.value) scroll.value.scrollTop = scroll.value.scrollHeight
 }
 
+// Scroll to the newest message: on mount (the overlay is v-if'd, so every
+// open is a fresh mount) and whenever the message count changes — sent or
+// received, both arrive as server-pushed thread updates.
 watch(() => props.state.thread?.messages?.length, scrollDown)
-watch(() => props.state.open, (open) => { if (open) scrollDown() })
+onMounted(scrollDown)
 
 // Relative timestamps like in analytics.
 const fmtTime = (t) => formatWhen(t)

frontend/src/assets/pagerite.css

@@ -410,11 +410,12 @@ body.editing #sidebar {
 /* The corner ✉️ (docs/messages.md) is in the pens row for everyone, so
    needs its own positioning context. Unread (a new reply for visitors,
    unanswered threads for admins) lifts it out of the icon-btn dimming
-   and animates it (see contact-nudge by the trigger button). */
-.contact-icon {
+   and animates it (see contact-nudge by the trigger button).
+   ✉️'s envelope glyph runs smaller than its emoji neighbors (📊, 🔐, the
+   flag) at the same font size; bump it to match their height (scoped to
+   .editor-pens to out-specify the row's `font: inherit` reset). */
+.editor-pens .contact-icon {
   position: relative;
-  /* ✉️'s envelope glyph runs smaller than its emoji neighbors (📊, 🔐,
-     the flag) at the same font size; bump it to match their height. */
   font-size: 1.25em;
 }