From a95d6cc59d38ec380d3d2f667aeb7a3f4d871221 Mon Sep 17 00:00:00 2001
From: John Williams <john@sia.tech>
Date: Mon, 25 Nov 2024 15:29:04 -0500
Subject: [PATCH] fix(explorer): handle UI display for empty host version or
 country code string cases

---
 .changeset/small-trees-cough.md            |  5 ++++
 apps/explorer/components/Host/HostInfo.tsx | 30 ++++++++++++----------
 2 files changed, 22 insertions(+), 13 deletions(-)
 create mode 100644 .changeset/small-trees-cough.md

diff --git a/.changeset/small-trees-cough.md b/.changeset/small-trees-cough.md
new file mode 100644
index 000000000..6d83f1e5d
--- /dev/null
+++ b/.changeset/small-trees-cough.md
@@ -0,0 +1,5 @@
+---
+'explorer': minor
+---
+
+Fixed UI display for empty host version or country code string cases.
diff --git a/apps/explorer/components/Host/HostInfo.tsx b/apps/explorer/components/Host/HostInfo.tsx
index 0f53c1936..1bee94955 100644
--- a/apps/explorer/components/Host/HostInfo.tsx
+++ b/apps/explorer/components/Host/HostInfo.tsx
@@ -93,20 +93,24 @@ export function HostInfo({ host }: Props) {
         )}
       </div>
       <div className="flex flex-wrap gap-x-2 gap-y-1 items-center">
-        <Tooltip content={`Host version ${host.settings.version}`}>
-          <Text size="14" color="subtle" className="flex gap-1 items-center">
-            <Fork16 />
-            {host.settings.version}
-          </Text>
-        </Tooltip>
-        <Tooltip content={`Host located in ${host.countryCode}`}>
-          <div className="flex gap-1 items-center">
-            <Text size="14">{countryCodeEmoji(host.countryCode)}</Text>
-            <Text size="14" color="subtle">
-              {host.countryCode}
+        {host.settings.version.length ? (
+          <Tooltip content={`Host version ${host.settings.version}`}>
+            <Text size="14" color="subtle" className="flex gap-1 items-center">
+              <Fork16 />
+              {host.settings.version}
             </Text>
-          </div>
-        </Tooltip>
+          </Tooltip>
+        ) : null}
+        {host.countryCode.length ? (
+          <Tooltip content={`Host located in ${host.countryCode}`}>
+            <div className="flex gap-1 items-center">
+              <Text size="14">{countryCodeEmoji(host.countryCode)}</Text>
+              <Text size="14" color="subtle">
+                {host.countryCode}
+              </Text>
+            </div>
+          </Tooltip>
+        ) : null}
         <Tooltip
           content={`Host first seen at ${humanDate(host.knownSince, {
             dateStyle: 'medium',