From 942cee5d66a77e6195730471a1546fad713c6ad4 Mon Sep 17 00:00:00 2001
From: rajchales-monito <rajchales-monito@users.noreply.github.com>
Date: Fri, 24 Jul 2026 13:27:11 +0200
Subject: [PATCH] Make country badge visible

---
 public/admin.css | 13 +++++++++++++
 public/admin.js  |  3 ++-
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/public/admin.css b/public/admin.css
index e9dc5b0..121a826 100644
--- a/public/admin.css
+++ b/public/admin.css
@@ -320,9 +320,22 @@ label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; }
   white-space: nowrap;
 }
 .visitor-summary-row .country-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
   border-color: #d9e6df;
   background: #fbfdfb;
 }
+.flag-emoji {
+  font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
+  font-size: 14px;
+  line-height: 1;
+}
+.country-code {
+  color: var(--muted);
+  font-size: 11px;
+  line-height: 1;
+}
 .visitor-summary-row .presence-dot {
   border: 0;
   padding: 0;
diff --git a/public/admin.js b/public/admin.js
index 4f3a062..c609ef5 100644
--- a/public/admin.js
+++ b/public/admin.js
@@ -508,7 +508,8 @@ function statusButtons(item) {
 function visitorCountry(item) {
   const countryCode = item.countryCode || countryFromLanguage(item.language) || countryFromTimezone(item.timezone);
   const countryFlag = item.countryFlag || flag(countryCode);
-  return countryCode ? `${countryFlag} ${escapeHtml(countryCode)}` : "zeme ?";
+  if (!countryCode) return `<span class="flag-emoji" aria-hidden="true">?</span><strong class="country-code">?</strong>`;
+  return `<span class="flag-emoji" aria-hidden="true">${countryFlag}</span><strong class="country-code">${escapeHtml(countryCode)}</strong>`;
 }
 
 function visitorDetails(conversation) {