From 88ea52f6445dba40bef4a9fe840de868b201b57f Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Sun, 18 Jan 2026 17:08:17 +0100
Subject: [PATCH] style(dashboard): increase list item height and adjust
 spacing for better interactivity

---
 components/dashboard/ContentStats.tsx | 8 ++++----
 components/dashboard/Locations.tsx    | 8 ++++----
 components/dashboard/TechSpecs.tsx    | 8 ++++----
 components/dashboard/TopReferrers.tsx | 8 ++++----
 4 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/components/dashboard/ContentStats.tsx b/components/dashboard/ContentStats.tsx
index e5bac54..62b432c 100644
--- a/components/dashboard/ContentStats.tsx
+++ b/components/dashboard/ContentStats.tsx
@@ -82,11 +82,11 @@ export default function ContentStats({ topPages, entryPages, exitPages, domain }
           </div>
         </div>
 
-        <div className="space-y-3 flex-1 min-h-[270px]">
+        <div className="space-y-2 flex-1 min-h-[270px]">
           {hasData ? (
             <>
               {displayedData.map((page, index) => (
-                <div key={index} className="flex items-center justify-between h-7 group hover:bg-neutral-50 dark:hover:bg-neutral-800 rounded-lg px-2 -mx-2 transition-colors">
+                <div key={index} className="flex items-center justify-between h-9 group hover:bg-neutral-50 dark:hover:bg-neutral-800 rounded-lg px-2 -mx-2 transition-colors">
                   <div className="flex-1 truncate text-neutral-900 dark:text-white flex items-center">
                     <a
                       href={`https://${domain.replace(/^https?:\/\//, '')}${page.path}`}
@@ -104,7 +104,7 @@ export default function ContentStats({ topPages, entryPages, exitPages, domain }
                 </div>
               ))}
               {Array.from({ length: emptySlots }).map((_, i) => (
-                <div key={`empty-${i}`} className="h-7 px-2 -mx-2" aria-hidden="true" />
+                <div key={`empty-${i}`} className="h-9 px-2 -mx-2" aria-hidden="true" />
               ))}
             </>
           ) : (
@@ -122,7 +122,7 @@ export default function ContentStats({ topPages, entryPages, exitPages, domain }
       >
         <div className="space-y-3 max-h-[60vh] overflow-y-auto pr-2">
           {data.map((page, index) => (
-            <div key={index} className="flex items-center justify-between py-1 group hover:bg-neutral-50 dark:hover:bg-neutral-800 rounded-lg px-2 -mx-2 transition-colors">
+            <div key={index} className="flex items-center justify-between py-2 group hover:bg-neutral-50 dark:hover:bg-neutral-800 rounded-lg px-2 -mx-2 transition-colors">
               <div className="flex-1 truncate text-neutral-900 dark:text-white flex items-center">
                 <a
                   href={`https://${domain.replace(/^https?:\/\//, '')}${page.path}`}
diff --git a/components/dashboard/Locations.tsx b/components/dashboard/Locations.tsx
index 08898db..52b5ae8 100644
--- a/components/dashboard/Locations.tsx
+++ b/components/dashboard/Locations.tsx
@@ -108,7 +108,7 @@ export default function Locations({ countries, cities, regions }: LocationProps)
           </div>
         </div>
 
-        <div className="space-y-3 flex-1 min-h-[270px]">
+        <div className="space-y-2 flex-1 min-h-[270px]">
           {activeTab === 'map' ? (
             hasData ? <WorldMap data={countries} /> : (
               <div className="h-full flex flex-col items-center justify-center">
@@ -119,7 +119,7 @@ export default function Locations({ countries, cities, regions }: LocationProps)
             hasData ? (
               <>
                 {displayedData.map((item, index) => (
-                  <div key={index} className="flex items-center justify-between h-7 group hover:bg-neutral-50 dark:hover:bg-neutral-800 rounded-lg px-2 -mx-2 transition-colors">
+                  <div key={index} className="flex items-center justify-between h-9 group hover:bg-neutral-50 dark:hover:bg-neutral-800 rounded-lg px-2 -mx-2 transition-colors">
                     <div className="flex-1 truncate text-neutral-900 dark:text-white flex items-center gap-3">
                       {activeTab === 'countries' && <span className="shrink-0">{getFlagComponent(item.country)}</span>}
                       {activeTab !== 'countries' && <span className="shrink-0">{getFlagComponent(item.country)}</span>}
@@ -136,7 +136,7 @@ export default function Locations({ countries, cities, regions }: LocationProps)
                   </div>
                 ))}
                 {Array.from({ length: emptySlots }).map((_, i) => (
-                  <div key={`empty-${i}`} className="h-7 px-2 -mx-2" aria-hidden="true" />
+                  <div key={`empty-${i}`} className="h-9 px-2 -mx-2" aria-hidden="true" />
                 ))}
               </>
             ) : (
@@ -155,7 +155,7 @@ export default function Locations({ countries, cities, regions }: LocationProps)
       >
         <div className="space-y-3 max-h-[60vh] overflow-y-auto pr-2">
           {(data as any[]).map((item, index) => (
-            <div key={index} className="flex items-center justify-between py-1 group hover:bg-neutral-50 dark:hover:bg-neutral-800 rounded-lg px-2 -mx-2 transition-colors">
+            <div key={index} className="flex items-center justify-between py-2 group hover:bg-neutral-50 dark:hover:bg-neutral-800 rounded-lg px-2 -mx-2 transition-colors">
               <div className="flex-1 truncate text-neutral-900 dark:text-white flex items-center gap-3">
                 <span className="shrink-0">{getFlagComponent(item.country)}</span>
                 <span className="truncate">
diff --git a/components/dashboard/TechSpecs.tsx b/components/dashboard/TechSpecs.tsx
index a3aff9f..252e913 100644
--- a/components/dashboard/TechSpecs.tsx
+++ b/components/dashboard/TechSpecs.tsx
@@ -76,11 +76,11 @@ export default function TechSpecs({ browsers, os, devices, screenResolutions }:
           </div>
         </div>
 
-        <div className="space-y-3 flex-1 min-h-[270px]">
+        <div className="space-y-2 flex-1 min-h-[270px]">
           {hasData ? (
             <>
               {displayedData.map((item, index) => (
-                <div key={index} className="flex items-center justify-between h-7 group hover:bg-neutral-50 dark:hover:bg-neutral-800 rounded-lg px-2 -mx-2 transition-colors">
+                <div key={index} className="flex items-center justify-between h-9 group hover:bg-neutral-50 dark:hover:bg-neutral-800 rounded-lg px-2 -mx-2 transition-colors">
                   <div className="flex-1 truncate text-neutral-900 dark:text-white flex items-center gap-3">
                     {item.icon && <span className="text-lg">{item.icon}</span>}
                     <span className="truncate">{item.name === 'Unknown' ? 'Unknown' : item.name}</span>
@@ -91,7 +91,7 @@ export default function TechSpecs({ browsers, os, devices, screenResolutions }:
                 </div>
               ))}
               {Array.from({ length: emptySlots }).map((_, i) => (
-                <div key={`empty-${i}`} className="h-7 px-2 -mx-2" aria-hidden="true" />
+                <div key={`empty-${i}`} className="h-9 px-2 -mx-2" aria-hidden="true" />
               ))}
             </>
           ) : (
@@ -109,7 +109,7 @@ export default function TechSpecs({ browsers, os, devices, screenResolutions }:
       >
         <div className="space-y-3 max-h-[60vh] overflow-y-auto pr-2">
           {data.map((item, index) => (
-            <div key={index} className="flex items-center justify-between py-1 group hover:bg-neutral-50 dark:hover:bg-neutral-800 rounded-lg px-2 -mx-2 transition-colors">
+            <div key={index} className="flex items-center justify-between py-2 group hover:bg-neutral-50 dark:hover:bg-neutral-800 rounded-lg px-2 -mx-2 transition-colors">
               <div className="flex-1 truncate text-neutral-900 dark:text-white flex items-center gap-3">
                 {item.icon && <span className="text-lg">{item.icon}</span>}
                 <span className="truncate">{item.name === 'Unknown' ? 'Unknown' : item.name}</span>
diff --git a/components/dashboard/TopReferrers.tsx b/components/dashboard/TopReferrers.tsx
index b412b61..ea41dde 100644
--- a/components/dashboard/TopReferrers.tsx
+++ b/components/dashboard/TopReferrers.tsx
@@ -36,11 +36,11 @@ export default function TopReferrers({ referrers }: TopReferrersProps) {
           )}
         </div>
 
-        <div className="space-y-3 flex-1 min-h-[270px]">
+        <div className="space-y-2 flex-1 min-h-[270px]">
           {hasData ? (
             <>
               {displayedReferrers.map((ref, index) => (
-                <div key={index} className="flex items-center justify-between h-7 group hover:bg-neutral-50 dark:hover:bg-neutral-800 rounded-lg px-2 -mx-2 transition-colors">
+                <div key={index} className="flex items-center justify-between h-9 group hover:bg-neutral-50 dark:hover:bg-neutral-800 rounded-lg px-2 -mx-2 transition-colors">
                   <div className="flex-1 truncate text-neutral-900 dark:text-white flex items-center gap-3">
                     <span className="text-lg flex-shrink-0">{getReferrerIcon(ref.referrer)}</span>
                     <span className="truncate" title={ref.referrer}>{ref.referrer}</span>
@@ -51,7 +51,7 @@ export default function TopReferrers({ referrers }: TopReferrersProps) {
                 </div>
               ))}
               {Array.from({ length: emptySlots }).map((_, i) => (
-                <div key={`empty-${i}`} className="h-7 px-2 -mx-2" aria-hidden="true" />
+                <div key={`empty-${i}`} className="h-9 px-2 -mx-2" aria-hidden="true" />
               ))}
             </>
           ) : (
@@ -69,7 +69,7 @@ export default function TopReferrers({ referrers }: TopReferrersProps) {
       >
         <div className="space-y-3 max-h-[60vh] overflow-y-auto pr-2">
           {referrers?.map((ref, index) => (
-            <div key={index} className="flex items-center justify-between py-1 group hover:bg-neutral-50 dark:hover:bg-neutral-800 rounded-lg px-2 -mx-2 transition-colors">
+            <div key={index} className="flex items-center justify-between py-2 group hover:bg-neutral-50 dark:hover:bg-neutral-800 rounded-lg px-2 -mx-2 transition-colors">
               <div className="flex-1 truncate text-neutral-900 dark:text-white flex items-center gap-3">
                 <span className="text-lg flex-shrink-0">{getReferrerIcon(ref.referrer)}</span>
                 <span className="truncate" title={ref.referrer}>{ref.referrer}</span>