From b7d5b23ae647ecb0e7fff39e70fc76b62da5a866 Mon Sep 17 00:00:00 2001
From: Leo Vasanko <git@vasanko.com>
Date: Fri, 21 Aug 2026 21:22:16 +0000
Subject: [PATCH] Cleaner formatting of utm tags in visitor table.

---
 frontend/src/AnalyticsView.vue   | 11 ++++++++++-
 frontend/src/analytics/format.js |  6 +++++-
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/frontend/src/AnalyticsView.vue b/frontend/src/AnalyticsView.vue
index c30216e..fa8465e 100644
--- a/frontend/src/AnalyticsView.vue
+++ b/frontend/src/AnalyticsView.vue
@@ -153,7 +153,7 @@ function countryName(code) {
                         {{ v.refererStep.slug }}
                       </a>
                     </template>
-                    <span v-if="v.utm && v.utm !== '—'" class="utm-tag"><small class="muted">{{ v.utm }}</small></span>
+                    <span v-if="v.utm && v.utm !== '—'" class="utm-tag" :title="v.utmTitle">{{ v.utm }}</span>
                     <a v-for="(s, si) in v.trail" :key="si"
                        :href="s.path" :title="s.title"
                        :target="s.external ? '_blank' : undefined"
@@ -418,7 +418,16 @@ function countryName(code) {
 
 .visit-table .utm-tag {
   display: inline-block;
+  max-width: 100%;
+  padding: 0.05rem 0.4rem;
+  border: 1px solid var(--line);
+  border-radius: 0.25rem;
+  font-size: 0.75em;
   color: var(--muted);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  vertical-align: bottom;
 }
 
 .visit-table .clickable-list {
diff --git a/frontend/src/analytics/format.js b/frontend/src/analytics/format.js
index 210d5e9..0dc823b 100644
--- a/frontend/src/analytics/format.js
+++ b/frontend/src/analytics/format.js
@@ -411,7 +411,10 @@ export function formatVisitRows(visits, pageTree, now = Date.now()) {
     const trail = [v.entry, ...(v.trail || [])]
       .map((p) => stepOf(p, titles))
       .filter(Boolean)
-    const utm = Object.entries(v.utm || {})
+    const utmKeys = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content']
+    const utmValues = utmKeys.map((k) => (v.utm || {})[k]).filter(Boolean)
+    const utm = utmValues.length ? utmValues.join(' · ') : ''
+    const utmTitle = Object.entries(v.utm || {})
       .map(([k, value]) => `${k}=${value}`)
       .join(', ')
     const dash = (s) => (s || '—')
@@ -434,6 +437,7 @@ export function formatVisitRows(visits, pageTree, now = Date.now()) {
       ua: v.ua_pretty || v.ua || '—',
       uaRaw: v.ua || '',
       utm: utm || '—',
+      utmTitle,
     }
   })
 }