Cleaner formatting of utm tags in visitor table.

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 {

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,
     }
   })
 }