made marker with fit text width

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

@@ -265,7 +265,7 @@ const AircraftMarker = ({ aircraft }: { aircraft: Aircraft }) => {
 		return `<div 
 						id="marker-${aircraft.id}"
 						class="${cn(
-							"relative w-[140px] transform flex items-center gap-2 px-2 z-100",
+							"relative w-auto transform inline-flex items-center gap-2 px-2 z-100",
 							anchor.includes("right") && "-translate-x-full",
 							anchor.includes("bottom") && "-translate-y-full",
 						)}"
@@ -291,7 +291,7 @@ const AircraftMarker = ({ aircraft }: { aircraft: Aircraft }) => {
 						>
 							${aircraft.fmsStatus}
 						</span>
-						<span class="text-white text-[15px]">
+						<span class="text-white text-[15px] text-nowrap">
 							${aircraft.bosName}
 						</span>
 						<div 

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

@@ -175,7 +175,7 @@ const MissionMarker = ({ mission }: { mission: Mission }) => {
 		return `<div 
 						id="marker-${mission.id}"
 						class="${cn(
-							"relative w-[100px] transform flex items-center gap-2 px-2 z-100",
+							"relative w-auto transform inline-flex items-center gap-2 px-2 z-100",
 							anchor.includes("right") && "-translate-x-full",
 							anchor.includes("bottom") && "-translate-y-full",
 						)}"
@@ -195,7 +195,7 @@ const MissionMarker = ({ mission }: { mission: Mission }) => {
 								${anchor.includes("top") ? `border-top: 3px solid ${MISSION_STATUS_TEXT_COLORS[mission.state]};` : `border-bottom: 3px solid ${MISSION_STATUS_TEXT_COLORS[mission.state]};`}
 							"
 						></div>
-						<span class="text-white text-[15px]">
+						<span class="text-white text-[15px] text-nowrap">
 							${mission.missionSummary}
 						</span>
 						<div