Avatar with drop down menu for accessing zones and signing out

src/app/[locale]/(main)/zones/components/ZoneThumbnail.tsx

@@ -5,6 +5,7 @@ import "leaflet-defaulticon-compatibility";
 import "leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.css";
 import "leaflet/dist/leaflet.css";
 import { FeatureGroup, GeoJSON, MapContainer, TileLayer } from "react-leaflet";
+import { twMerge } from "tailwind-merge";
 
 import { MapEvents } from "@/components/MapEvents";
 import type { ZoneModel } from "@/server/models/zoneModel";
@@ -13,10 +14,10 @@ const center: LatLngLiteral = { lat: 47.0844, lng: 2.3964 };
 
 export type ZoneThumbnailProps = {
   features: ZoneModel["features"];
-  size: number;
+  className?: string;
 };
 
-export const ZoneThumbnail = ({ features, size }: ZoneThumbnailProps) => {
+export const ZoneThumbnail = ({ features, className }: ZoneThumbnailProps) => {
   return (
     <MapContainer
       center={center}
@@ -24,7 +25,7 @@ export const ZoneThumbnail = ({ features, size }: ZoneThumbnailProps) => {
       zoomControl={false}
       scrollWheelZoom={false}
       dragging={false}
-      style={{ height: size, width: size }}
+      className={twMerge("h-[200px] w-auto md:w-[200px]", className)}
       attributionControl={false}
     >
       <MapEvents bounds={L.geoJson(features).getBounds()} />