From 2e08f4861fdd39ff2abfe616f0931801d99169b1 Mon Sep 17 00:00:00 2001
From: Leo Vasanko <git@vasanko.com>
Date: Mon, 28 Sep 2026 02:07:48 +0000
Subject: [PATCH] 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    | 7 +++++--
 frontend/src/assets/pagerite.css | 9 +++++----
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/frontend/src/ContactPanel.vue b/frontend/src/ContactPanel.vue
index 5a31c40..12be646 100644
--- a/frontend/src/ContactPanel.vue
+++ b/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)
diff --git a/frontend/src/assets/pagerite.css b/frontend/src/assets/pagerite.css
index ab9222d..1192389 100644
--- a/frontend/src/assets/pagerite.css
+++ b/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;
 }