resolves #91

apps/dispatch/app/_components/map/_components/MarkerCluster.tsx

@@ -42,10 +42,10 @@ const PopupContent = ({
 
 	return (
 		<>
-			<div className="relative flex flex-col text-white min-w-[200px]">
+			<div className="relative flex min-w-fit flex-col text-white">
 				<div
 					className={cn(
-						"absolute w-[calc(100%+2px)] h-4 z-99 pointer-events-none",
+						"z-99 pointer-events-none absolute h-4 w-[calc(100%+2px)]",
 						anchor.includes("left") ? "-left-[2px]" : "-right-[2px]",
 						anchor.includes("top") ? "-top-[2px]" : "-bottom-[2px]",
 					)}
@@ -68,7 +68,7 @@ const PopupContent = ({
 					return (
 						<div
 							key={mission.id}
-							className={cn("relative inline-flex items-center gap-2 text-nowrap w-full")}
+							className={cn("relative inline-flex w-full items-center gap-2 text-nowrap")}
 							style={{
 								backgroundColor: markerColor,
 								cursor: "pointer",
@@ -99,7 +99,7 @@ const PopupContent = ({
 				{aircrafts.map((aircraft) => (
 					<div
 						key={aircraft.id}
-						className="relative w-auto inline-flex items-center gap-2 text-nowrap cursor-pointer"
+						className="relative inline-flex w-auto cursor-pointer items-center gap-2 text-nowrap px-2"
 						style={{
 							backgroundColor: FMS_STATUS_COLORS[aircraft.fmsStatus],
 						}}
@@ -119,14 +119,18 @@ const PopupContent = ({
 						}}
 					>
 						<span
-							className="mx-2 my-0.5 text-gt font-bold"
+							className="text-gt my-0.5 font-bold"
 							style={{
 								color: FMS_STATUS_TEXT_COLORS[aircraft.fmsStatus],
 							}}
 						>
 							{aircraft.fmsStatus}
 						</span>
-						<span>{aircraft.Station.bosCallsign}</span>
+						<span>
+							{aircraft.Station.bosCallsign.length > 15
+								? aircraft.Station.locationStateShort
+								: aircraft.Station.bosCallsign}
+						</span>
 					</div>
 				))}
 			</div>
@@ -299,7 +303,7 @@ export const MarkerCluster = () => {
 					position={[c.lat, c.lng]}
 					autoPan={false}
 					autoClose={false}
-					className="w-[202px]"
+					className="min-w-fit"
 				>
 					<PopupContent aircrafts={c.aircrafts} missions={c.missions} />
 				</SmartPopup>