From c93766bb48b157ecf900e88f6f3fbc1e01e43f13 Mon Sep 17 00:00:00 2001
From: Fred KISSIE <fredkiss3@gmail.com>
Date: Fri, 16 Jan 2026 17:35:17 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84fix=20countries=20list=20grid=20ite?=
 =?UTF-8?q?ms?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/LogAnalyticsData.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/LogAnalyticsData.tsx b/src/components/LogAnalyticsData.tsx
index 174865e4..0c3e1ec8 100644
--- a/src/components/LogAnalyticsData.tsx
+++ b/src/components/LogAnalyticsData.tsx
@@ -510,7 +510,7 @@ function TopCountriesList(props: TopCountriesListProps) {
                 </div>
             )}
             {/* `aspect-475/335` is the same aspect ratio as the world map component */}
-            <ol className="w-full overflow-auto grid gap-1 aspect-475/335">
+            <ol className="w-full overflow-auto gap-1 aspect-475/335 flex flex-col">
                 {props.countries.length === 0 && (
                     <div className="flex items-center justify-center size-full text-muted-foreground gap-1">
                         {props.isLoading ? (
@@ -523,12 +523,12 @@ function TopCountriesList(props: TopCountriesListProps) {
                         )}
                     </div>
                 )}
-                {props.countries.map((country) => {
+                {props.countries.slice(0, 3).map((country) => {
                     const percent = country.count / props.total;
                     return (
                         <li
                             key={country.code}
-                            className="grid grid-cols-7 rounded-xs hover:bg-muted relative items-center text-sm"
+                            className="w-full grid grid-cols-7 rounded-xs hover:bg-muted relative items-center text-sm"
                         >
                             <div
                                 className={cn(