From a0612d74b172ebcfe734c47e598a5ac35ff1fa1c Mon Sep 17 00:00:00 2001
From: Shivam Patel <smpatel0423@gmail.com>
Date: Mon, 9 Feb 2026 02:46:41 -0500
Subject: [PATCH] Fix country detail panel clipped by overflow-hidden ancestors

The dropdown was rendering inside the overflow-x-auto scroll container,
which forces overflow-y to clip too, making it invisible. Lifted the
detail panel above the scroll row as a separate component, with
selected state managed by GlobeCard so only one expands at a time.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 components/widgets/GlobeCard.tsx | 74 ++++++++++++++++++++------------
 1 file changed, 46 insertions(+), 28 deletions(-)

diff --git a/components/widgets/GlobeCard.tsx b/components/widgets/GlobeCard.tsx
index c27fa1f..3eefcb4 100644
--- a/components/widgets/GlobeCard.tsx
+++ b/components/widgets/GlobeCard.tsx
@@ -18,37 +18,45 @@ function countryCodeToFlag(code: string): string {
     return [...code.toUpperCase()].map(c => String.fromCodePoint(0x1f1e6 + c.charCodeAt(0) - 65)).join('');
 }
 
-function CountryChip({ country }: { country: CountryData }) {
-    const [expanded, setExpanded] = useState(false);
-
+function CountryChip({ country, isSelected, onSelect }: { country: CountryData; isSelected: boolean; onSelect: (code: string | null) => void }) {
     return (
-        <div className="relative flex-shrink-0">
-            <button
-                onClick={() => setExpanded(!expanded)}
-                className="flex items-center gap-1.5 px-2.5 py-1 rounded-lg bg-neutral-800/80 border border-neutral-700/50 hover:border-neutral-600 transition-colors text-sm cursor-pointer"
-            >
-                <span className="text-base leading-none">{countryCodeToFlag(country.code)}</span>
-                <span className="text-neutral-400 font-mono text-xs">{country.code}</span>
-                <span className="text-neutral-200 font-semibold text-xs">{country.count}</span>
-            </button>
-            {expanded && (
-                <div className="absolute bottom-full left-0 mb-1 w-56 bg-neutral-800 border border-neutral-700 rounded-lg shadow-xl z-30 p-2 max-h-48 overflow-y-auto">
-                    {country.regions.map((r) => (
-                        <div key={r.region} className="mb-1.5 last:mb-0">
-                            <div className="flex justify-between text-xs px-1">
-                                <span className="text-neutral-300 font-medium">{r.region}</span>
-                                <span className="text-neutral-500">{r.count}</span>
-                            </div>
-                            {r.cities.map((c) => (
-                                <div key={c.city} className="flex justify-between text-xs px-1 pl-3">
-                                    <span className="text-neutral-500">{c.city}</span>
-                                    <span className="text-neutral-600">{c.count}</span>
-                                </div>
-                            ))}
+        <button
+            onClick={() => onSelect(isSelected ? null : country.code)}
+            className={`flex items-center gap-1.5 px-2.5 py-1 rounded-lg border transition-colors text-sm cursor-pointer flex-shrink-0 ${
+                isSelected
+                    ? 'bg-neutral-700/80 border-neutral-500'
+                    : 'bg-neutral-800/80 border-neutral-700/50 hover:border-neutral-600'
+            }`}
+        >
+            <span className="text-base leading-none">{countryCodeToFlag(country.code)}</span>
+            <span className="text-neutral-400 font-mono text-xs">{country.code}</span>
+            <span className="text-neutral-200 font-semibold text-xs">{country.count}</span>
+        </button>
+    );
+}
+
+function CountryDetail({ country }: { country: CountryData }) {
+    return (
+        <div className="mb-2 bg-neutral-800/90 border border-neutral-700 rounded-lg p-2.5 max-h-36 overflow-y-auto">
+            <div className="flex items-center gap-2 mb-1.5 text-xs text-neutral-300 font-medium">
+                <span className="text-sm">{countryCodeToFlag(country.code)}</span>
+                <span>{country.code}</span>
+                <span className="text-neutral-500">{country.count} hits</span>
+            </div>
+            {country.regions.map((r) => (
+                <div key={r.region} className="mb-1 last:mb-0">
+                    <div className="flex justify-between text-xs px-1">
+                        <span className="text-neutral-300">{r.region}</span>
+                        <span className="text-neutral-500">{r.count}</span>
+                    </div>
+                    {r.cities.map((c) => (
+                        <div key={c.city} className="flex justify-between text-xs px-1 pl-3">
+                            <span className="text-neutral-500">{c.city}</span>
+                            <span className="text-neutral-600">{c.count}</span>
                         </div>
                     ))}
                 </div>
-            )}
+            ))}
         </div>
     );
 }
@@ -72,6 +80,7 @@ export function GlobeCard() {
         countries: [],
     });
     const [grabbing, setGrabbing] = useState(false);
+    const [selectedCountry, setSelectedCountry] = useState<string | null>(null);
 
     useEffect(() => {
         async function fetchVisitors() {
@@ -190,9 +199,18 @@ export function GlobeCard() {
 
             {visitorStats.countries.length > 0 && (
                 <div className="absolute bottom-0 left-0 right-0 z-10 px-4 pb-3 pt-6 bg-gradient-to-t from-neutral-900 via-neutral-900/90 to-transparent">
+                    {selectedCountry && (() => {
+                        const country = visitorStats.countries.find(c => c.code === selectedCountry);
+                        return country ? <CountryDetail country={country} /> : null;
+                    })()}
                     <div className="flex gap-2 overflow-x-auto pb-1 scrollbar-none">
                         {visitorStats.countries.map((country) => (
-                            <CountryChip key={country.code} country={country} />
+                            <CountryChip
+                                key={country.code}
+                                country={country}
+                                isSelected={selectedCountry === country.code}
+                                onSelect={setSelectedCountry}
+                            />
                         ))}
                     </div>
                 </div>