From 7553fe0bb55d2a68622055f2c1b4455cde253324 Mon Sep 17 00:00:00 2001
From: fuomag9 <1580624+fuomag9@users.noreply.github.com>
Date: Fri, 27 Feb 2026 02:00:00 +0100
Subject: [PATCH] fix: make world map fill available card height instead of
 fixed 340px

---
 app/(dashboard)/analytics/AnalyticsClient.tsx | 8 +++++---
 app/(dashboard)/analytics/WorldMapInner.tsx   | 5 +++--
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/app/(dashboard)/analytics/AnalyticsClient.tsx b/app/(dashboard)/analytics/AnalyticsClient.tsx
index 6352baf3..ebd535dd 100644
--- a/app/(dashboard)/analytics/AnalyticsClient.tsx
+++ b/app/(dashboard)/analytics/AnalyticsClient.tsx
@@ -324,12 +324,14 @@ export default function AnalyticsClient() {
           {/* World map + Countries */}
           <Grid container spacing={2}>
             <Grid size={{ xs: 12, md: 7 }}>
-              <Card elevation={0} sx={{ border: '1px solid rgba(148,163,184,0.12)', height: '100%' }}>
-                <CardContent>
+              <Card elevation={0} sx={{ border: '1px solid rgba(148,163,184,0.12)', height: '100%', display: 'flex', flexDirection: 'column' }}>
+                <CardContent sx={{ display: 'flex', flexDirection: 'column', flex: 1, minHeight: 0 }}>
                   <Typography variant="subtitle1" fontWeight={600} sx={{ mb: 1 }}>
                     Traffic by Country
                   </Typography>
-                  <WorldMap data={countries} />
+                  <Box sx={{ flex: 1, minHeight: 0 }}>
+                    <WorldMap data={countries} />
+                  </Box>
                 </CardContent>
               </Card>
             </Grid>
diff --git a/app/(dashboard)/analytics/WorldMapInner.tsx b/app/(dashboard)/analytics/WorldMapInner.tsx
index 7c062d69..7d8a2069 100644
--- a/app/(dashboard)/analytics/WorldMapInner.tsx
+++ b/app/(dashboard)/analytics/WorldMapInner.tsx
@@ -229,7 +229,7 @@ export default function WorldMapInner({ data }: { data: CountryStats[] }) {
   }
 
   return (
-    <Box sx={{ position: 'relative' }}>
+    <Box sx={{ position: 'relative', height: '100%', display: 'flex', flexDirection: 'column' }}>
       {/* Override MapLibre popup chrome to match dark theme */}
       <style>{`
         .wm-popup .maplibregl-popup-content {
@@ -248,7 +248,8 @@ export default function WorldMapInner({ data }: { data: CountryStats[] }) {
         borderRadius: 2,
         overflow: 'hidden',
         border: '1px solid rgba(148,163,184,0.08)',
-        height: 340,
+        flex: 1,
+        minHeight: 280,
       }}>
         <MapGL
           mapStyle={MAP_STYLE}