style: make map responsive and fill container with proper viewBox ratio

components/dashboard/WorldMap.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import React, { memo, useMemo, useState } from 'react'
-import { ComposableMap, Geographies, Geography, ZoomableGroup } from 'react-simple-maps'
+import { ComposableMap, Geographies, Geography } from 'react-simple-maps'
 import { scaleLinear } from 'd3-scale'
 import countries from 'i18n-iso-countries'
 import enLocale from 'i18n-iso-countries/langs/en.json'
@@ -44,13 +44,13 @@ const WorldMap = ({ data }: WorldMapProps) => {
   const defaultStroke = isDark ? "#171717" : "#FFFFFF" // gray-900 / white
   
   return (
-    <div className="relative w-full h-[300px] overflow-hidden flex items-center justify-center">
+    <div className="relative w-full">
       <ComposableMap 
-        width={800} 
-        height={450} // Aspect ratio adjustment
-        projectionConfig={{ rotate: [-10, 0, 0], scale: 155 }}
+        width={475} 
+        height={335}
+        projectionConfig={{ rotate: [-10, 0, 0], scale: 90, center: [0, 20] }}
+        className="w-full h-auto"
       >
-        <ZoomableGroup center={[0, 10]} maxZoom={1}>
         <Geographies geography={geoUrl}>
           {({ geographies }) =>
             geographies
@@ -65,7 +65,7 @@ const WorldMap = ({ data }: WorldMapProps) => {
                     geography={geo}
                     fill={count > 0 ? colorScale(count) : defaultFill}
                     stroke={defaultStroke}
-                      strokeWidth={0.7}
+                    strokeWidth={0.5}
                     style={{
                       default: { outline: "none", transition: "all 250ms" },
                       hover: { fill: "#FD5E0F", outline: "none", cursor: 'pointer' },
@@ -90,7 +90,6 @@ const WorldMap = ({ data }: WorldMapProps) => {
             })
           }
         </Geographies>
-        </ZoomableGroup>
       </ComposableMap>
       {tooltipContent && (
          <div